Smooth Scroll With Configurable Speed, Easing And Offset - animateScroll.js

Smooth Scroll With Configurable Speed, Easing And Offset - animateScroll.js
File Size: 10.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

animateScroll.js is a small and easy-to-use smooth scroll plugin which animates the page scrolling to a specific element with configurable offset, easing effect, and animation speed.

How to use it:

1. Insert the minified version of the animateScroll.js plugin after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="animatescroll.js"></script>

2. Smoothly scroll the page to a specific element within the document.

<p id="top"></p>
$(function(){
  $('#top').animatescroll();
});

3. Customize the animation speed in milliseconds. Default: 800.

$(function(){
  $('#top').animatescroll({
    scrollSpeed: 2000
  });
});

4. Customize the easing effect. All possible easing functions:

  1. swing
  2. easeInQuad
  3. easeOutQuad
  4. easeInOutQuad
  5. easeInCubic
  6. easeOutCubic
  7. easeInOutCubic
  8. easeInQuart
  9. easeOutQuart
  10. easeInOutQuart
  11. easeInQuint
  12. easeOutQuint
  13. easeInOutQuint
  14. easeInSine
  15. easeOutSine
  16. easeInOutSine
  17. easeInExpo
  18. easeOutExpo
  19. easeInOutExpo
  20. easeInCirc
  21. easeOutCirc
  22. easeInOutCirc
  23. easeInElastic
  24. easeOutElastic
  25. easeInOutElastic
  26. easeInBack
  27. easeOutBack
  28. easeInOutBack
  29. easeInBounce
  30. easeOutBounce
  31. easeInOutBounce
$(function(){
  $('#top').animatescroll({
    easing:"swing"
  });
});

5. Customize the offset in pixels. Default: 0.

$(function(){
  $('#top').animatescroll({
    padding: 150
  });
});

6. Smoothly scroll a specific container instead of the whole body.

$(function(){
  $('#top').animatescroll({
    element:".yourContainer"
  });
});

7. Available callback functions which will be triggered when the smooth scroll starts and ends.

$(function(){
  $('#top').animatescroll({
    onScrollStart: function(){
      // do something
    },
    onScrollEnd: function(){
      // do something
    }
  });
});

This awesome jQuery plugin is developed by rampatra. For more Advanced Usages, please check the demo page or visit the official website.