Update: demo and documentation site: iamdustan.com/smoothscroll/
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.
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