Author: | internetguru |
---|---|
Views Total: | 290 views |
Official Page: | Go to website |
Last Update: | April 19, 2022 |
License: | MIT |
Preview:

Description:
Feeling annoyed and demotivated to scroll up and down your long website’s and blog’s pages again and again?
Have you ever wanted to make your website’s page scroll top easily and quickly? Well, now you can!
scrolltopable is a native JavaScript library that will scroll your page to the top whenever a visitor clicks on the scroll-to-top button. This functionality is provided by putting a customizable back-to-top button at the bottom of your page.
How to use it:
1. Import the basic stylesheet for the back to top button.
<link rel="stylesheet" href="basic.css" />
2. Import the scrolltopable.js
as an ES module.
<script type="module"> import { Scrolltopable } from './index.min.js' </script>
3. Initialize the scrolltopable with default options. That’s it.
Scrolltopable.init({ // options here })
4. Override the default button styles.
#js-scrolltopable { display: none; position: fixed; bottom: 0; right: 0; background: rgba(0,0,0,0.5); color: white; width: 3rem; height: 3rem; margin: 0.5em; border-radius: 0.25em; cursor: pointer; } #js-scrolltopable.js-scrolltopable--visible { display: flex; justify-content: center; align-items: center; } #js-scrolltopable > span { font-family: Arial, sans-serif; font-size: 3em; position: relative; top: 0.15em; }
5. Enable the smooth scroll on your page. OPTIONAL BUT RECOMMENDED.
html { scroll-behavior: smooth; }
5. Available options to customize the scroll to top button.
Scrolltopable.init({ // Button content (raw HTML) content: '↑', // Button title title: 'Top', // Button id and class name id: 'js-scrolltopable', // Class for visible button visibleClass: 'js-scrolltopable--visible', // Class for active button activeClass: 'js-scrolltopable--active', // List of extra classes separated by space extraClass: 'noprint', // No-show zone from the top (px) hideBeforeTop: 500, // No-hide zone from the button (px) showBeforeBottom: 500, // Show the button after scrolling up (px) showAfterUp: 200, // Hide the button after scrolling down (px) hideAfterDown: 200, // Keep `activeClass` after clicking the button (ms) activeTime: 0, // Wait before evaluating scrolling (ms) scrollActionDelay: 200, })