This time I will share jQuery Plugin and tutorial about Smooth Scroll With Configurable Speed, Easing And Offset – animateScroll.js, hope it will help you in programming stack.
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.
2 |
integrity = "sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
3 |
crossorigin = "anonymous" > |
5 |
< script src = "animatescroll.js" ></ script > |
2. Smoothly scroll the page to a specific element within the document.
2 |
$( '#top' ).animatescroll(); |
3. Customize the animation speed in milliseconds. Default: 800.
2 |
$( '#top' ).animatescroll({ |
4. Customize the easing effect. All possible easing functions:
- swing
- easeInQuad
- easeOutQuad
- easeInOutQuad
- easeInCubic
- easeOutCubic
- easeInOutCubic
- easeInQuart
- easeOutQuart
- easeInOutQuart
- easeInQuint
- easeOutQuint
- easeInOutQuint
- easeInSine
- easeOutSine
- easeInOutSine
- easeInExpo
- easeOutExpo
- easeInOutExpo
- easeInCirc
- easeOutCirc
- easeInOutCirc
- easeInElastic
- easeOutElastic
- easeInOutElastic
- easeInBack
- easeOutBack
- easeInOutBack
- easeInBounce
- easeOutBounce
- easeInOutBounce
2 |
$( '#top' ).animatescroll({ |
5. Customize the offset in pixels. Default: 0.
2 |
$( '#top' ).animatescroll({ |
6. Smoothly scroll a specific container instead of the whole body.
2 |
$( '#top' ).animatescroll({ |
3 |
element: ".yourContainer" |
7. Available callback functions which will be triggered when the smooth scroll starts and ends.
02 |
$( '#top' ).animatescroll({ |
03 |
onScrollStart: function (){ |
06 |
onScrollEnd: function (){ |
This awesome jQuery plugin is developed by rampatra. For more Advanced Usages, please check the demo page or visit the official website.