- Only one dependency (for the polyfill)
- Cross-browser
- 60 FPS Animation
- If user scrolls while animation is running, scroll animation would be immediately canceled
- Available adding script or browserify
#### Live demo
npm install scrollto-with-animation --save
var scrollToWithAnimation = require('scrollto-with-animation')
// or ES2015
import scrollToWithAnimation from 'scrollto-with-animation'
<script src="scrollToWithAnimation.min.js"></script>
scrollToWithAnimation(
document.body, // element to scroll
'scrollTop' // direction to scroll
0, // target scrollY (0 means top of the page)
10000, // duration in ms
'easeInOutCirc', /*
Can be a name of the list of 'Possible easing equations' or a callback
that defines the ease. # http://gizma.com/easing/
*/
function () { // callback function that runs after the animation (optional)
console.log('done!')
}
);
This will scroll to top of the page and the animation will run for 10 seconds (10000ms).
## Options
linearTween
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
Feel free to add more ease functions to easings.js open a Pull request!
MIT