I did, and let me tell you it is not something you find on the “You don’t need jQuery” webpages.
And it even gets more complicated when you want to apply a specific jQuery easing effect, fire a callback on finish, being able to stop the animation at any moment etc.
You could go and make use of a smooth scrolling library like this but it is 5Kb with polyfills and minified and it does a lot more than scrolling. It deals with link anchors and the text within them and it has quite a lot of logic dedicated at that. Something perhaps unnecessary if you just want to scroll smootly.
If you want something much smaller to use within your code, here’s hat I’ve used for my fullPage.js library.
It is only 0.4Kb minified and pretty straight forward.
I’ve made it available at Github just before writing this article so you can have access to it all as well as the minified files.
In order to use it just call skrollTop.scrollTo like this:
How to add jQuery easing effects
jQuery provides a small set of animation effects they call Easings Functions.
If you want to have access to more effects, then you would have to go for jQuery UI
The library includes the easeInOutCubic effect, but you can add any others provided by jQuery by using the vendor file easings.min.js (only 12Kb) that I also provide in fullPage.js. Then just passs the name of the effect as an option to the library to specify which easing you want to use:
Join 2,000+ readers and learn something new every month!
Get notified about new blog posts, tips, tricks, fullPage.js news etc.