Smooth Scrolling in JS

Written by Benjamin Friedman, August 27th, 2016

Smooth Scrolling in Javascript. If you've used this or are using it now, it's probably via a 3rd party library. For quite some time at Axolsoft we've been thinking there has to be an easier way to achieve Smooth Scrolling than by dumping an entire library onto a site, just for one facet. It turns out solutions are few and far between, if present at all. Additionally many can't seem to achieve as smooth of a transition that we would like. So, we think we've come up with our own lightweight and precise solution to smooth scrolling, and we're calling it SmoothScroller.js.

Just to give some background the concept of smooth scrolling is fairly straight forward, when you think about it. Take the user's current position in page and move it to another via increments over a given time. The result is awfully similar to writing a basic rendering loop. You need the make sure you're drawing out as close to 60 fps (or 100 fps) as you can possibly be. Rendering too fast uses more computing time than you need and rendering too slow creates a perceivable stutter. The simple fact is you need to create a self balancing render loop, one that is capable of accounting for it's own runtime and it's own delays to achieve your ideal 60 (or 100) fps.

When taken into consideration, it made more sense for us at Axolsoft to create our own implementation of Smooth Scrolling, rather than use an entire library. Currently jQuery has the capacity to add smooth scrolling to any site, however it does so at a size that is roughly 600% larger than ours. Additionally this is assuming that jQuery is compressed down to a 32kb size and ours is uncompressed. When our implementation is compressed the Smooth Scroller weighs in around 2kb, now that's compact!

Although we are not pushing against using jQuery, we are against wasting bandwidth. Unless you're using jQuery for significant functionality you should probably be using a more precise solution. We'd like to offer that solution in the form of our stand alone SmoothScroller.js.

Finally we would like to add that this will be open sourced under the MIT license. You can modify it as you wish, change it as you like and even contribute to improve. The SmoothScroller.js project is here on Github, feel free to try it out and see how it works for you.

We hope that by giving this out we can help developers of websites to further reduce the size of their sites and increase overall download times. In doing so users and visitors of your site will be receiving a more responsive and an overall superior experience than before, even if just slightly.

Questions? Corrections? Concerns? Contact us at inquiries@axolsoft.com