Ultimate Back To Top Button Library – scrolltopable.js

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, 
})