Animated Scroll To Top Plugin in jquery

In this tutorial i am going to introduce a wonderful plugin called jquery scroll up, Scroll To Top is an useful feature to the visitor to get back to the top of the page when visitor scroll down the page, he/she can any time click the scroll to up button and get back to the top of the page. Jquery scrollUp is a lightweight jQuery Plugin that helps you easily create Scroll To Top feature with smooth scrolling effect.
scroll-to-top-jquery



Step-1: Add jquery library on page. Make sure you have added jquery library before jqyery scrollup library on page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jquery.scrollUp.min.js"></script>

Step-2: Add basic CSS on page.

<style>
#scrollUp {
  bottom: 20px;
  right: 20px;
  padding: 10px 20px;
  background: #555;
  color: #fff;
}
</style>




Step-3: Finally put basic and minimal jquery scrollup function on page to make it actionable.

$(function(){
  $.scrollUp();
});

Above function is enough to add pre defined animated link on page but if you want to add some feature on your scroll up function then below is the more parameter to handle more action.

$(function () {
  $.scrollUp({
    scrollName: 'scrollUp', 
    topDistance: '300', 
    topSpeed: 300, 
    animation: 'fade', 
    animationInSpeed: 200, 
    animationOutSpeed: 200, 
    scrollText: 'Scroll to top', 
    activeOverlay: false, 
  });
});

Plugin credit goes to markgoodyear.com

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff