CSSOM Smooth Scrolling

Update: demo and documentation site: iamdustan.com/smoothscroll/

Coming soon to a browser near you

Paul Irish recently shared on Google+ that the CSSWG has standardized smooth scrolling on behalf of web developers everywhere. This means no more jQuery or other such javascript to simply scroll to an element.

In the future you’ll be able to declare smooth scrolling in your css with body { scroll-behavior: smooth } or programmatically by using window.scrollTo(x, y, 'smooth'); or document.getElementById('offscreenElement').scrollIntoView(true, 'smooth').

Yet another fine example of browsers standardizing a behavior developers have been using for years.

Available today to a polyfill near you

I have wrapped the programmatic version into a simple polyfill. You can grab it off my github account iamdustan/smoothscroll or install it with bower install smoothscroll --save.

I’ve never attempted to polyfill a css property, but I hope to find a solution so that simply including this script on the page and adding body { scroll-behavior: smooth } will give you smooth scrolling for all internal anchors.

Oh, and don’t worry about file size. It’s only 243 bytes gzipped.

These words brought to you by Dustan Kasten. A friendly, bearded, husband, father, and user interface engineer living in Charlotte, NC. Considers himself quite partial to React.js these days. Find @iamdustan on Twitter