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.

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.

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', // Element ID
    topDistance: '300', // Distance from top before showing element (px)
    topSpeed: 300, // Speed back to top (ms)
    animation: 'fade', // Fade, slide, none
    animationInSpeed: 200, // Animation in speed (ms)
    animationOutSpeed: 200, // Animation out speed (ms)
    scrollText: 'Scroll to top', // Text for element
    activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
  });
});

Plugin credit goes to markgoodyear.com

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

Related