scroll-to-top-btn

v0.1.0

Published

3 years ago

Scroll to top button component

Downloads

0High
0Medium
0Low

annmirosh

scroll scroll to top scroll page

Scroll to top Web Component

This is a Web Component that implements a "scroll-to-top" button functionality.

This component can be used with React, Angular, Ember, Vue.js frameworks or in the VanillaJS app.

Demo

How to use:

Install scroll-to-top-btn package.
npm i scroll-to-top-btn
Depending on the framework that you use, enable the custom HTML elements and use <scroll-to-top-btn></scroll-to-top-btn> tag in your code:

For Vanilla JS project (see the code example here):

Add script tag to the page:

<script src="node_modules/scroll-to-top-btn/dist/scrolltotop.js"></script>

Use the component on your page:

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
    <meta charset="utf-8">
    <script src="node_modules/scroll-to-top-btn/dist/scrolltotop.js"></script>
</head>
<body>
<b>Add some long content here</b>
<scroll-to-top-btn></scroll-to-top-btn>

</body>
</html>

For React project (see the code example here):

Define custom elements in the index.js or main.js file

import {defineCustomElements} from 'scroll-to-top-btn/dist/loader';

ReactDOM.render(<App/>, document.getElementById('root'));

defineCustomElements(window);

Use the component on your view:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <b>Add some long content here</b>
        <scroll-to-top-btn mode="dark"></scroll-to-top-btn>
      </header>
    </div>
  );
}

export default App;

For Vue.js project (see the code example here):

Define custom elements in the index.js or main.js file:

import { defineCustomElements } from 'scroll-to-top-btn/dist/loader';
Vue.config.ignoredElements = [/scroll-to-top-btn/];
defineCustomElements(window);

Add component to the template:

<template>
    <div id="app">
        <b>Add some long content here</b>
        <scroll-to-top-btn></scroll-to-top-btn>
    </div>
</template>

For Angular project (see the code example here):

Define custom elements in the main.ts file:

import {defineCustomElements} from 'scroll-to-top-btn/dist/loader';

defineCustomElements(window);

In the module where you are going to use the component import CUSTOM_ELEMENTS_SCHEMA to have ability to use custom elements.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:[CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Add component's tag to your view:

<div>
  <b>Add some long content here</b>
  <scroll-to-top-btn></scroll-to-top-btn>
</div>

Published

Vulnerabilities

Links

Maintainers

Keywords