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

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.