Simple Scroll Up Plugin With JavaScript – simplescrollup.js

Preview:

Description:

simplescrollup.js is a small JavaScript library that enables an element to smoothly scroll back to the top of the webpage.

Install & download

# NPM
$ npm install simplescrollup --save

How to use it:

Import the ‘simplescrollup.js’ into the html file.

<script src="simplescrollup.js"></script>

Create a ‘Back to top’ link on the page.

<a href="#up" class="simplescrollup__button simplescrollup__button--hide">
  Back To Top
</a>

The example CSS to style & animate the ‘Back To Top’ link.

.simplescrollup__button {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  transition: 1s all;
  z-index: 10000;
  color: #fff;
}
.simplescrollup__button--show { transform: translateX(0); }
.simplescrollup__button--hide { transform: translateX(100px); }

That’s it. You can config the scroll to top behavior using inline markup as these:

• duration: animation speed
• height-hide: distance in pixels from top at which button will be displayed
• easing: easing effects: linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint

<a href="#up" 
   duration="1000" 
   height-hide="100" 
   easing="easeInOutQuad"
   class="simplescrollup__button simplescrollup__button--hide">
   Back To Top
</a>