Serg Hospodarets Blog

Serg Hospodarets blog

Native Smooth Scroll behavior Serg Hospodarets Blog

Frequently we want to add scrolling to some part of the page or box. E.g. to highlight something or just scroll to an anchor.

To provide better UX and feeling usually smooth scrolling is used.

Previously to implement it we had to use plugins like “jQuery.scrollTo” or similar solutions.

But dreams came true- there is a specification for native smooth scroll behavior API.



First of all- you can provide smooth scroll behavior in two ways- from JavaScript or CSS.


New API is quite easy to use, just instead of:

window.scrollBy(left, top);
window.scrollTo(left, top);


    "behavior": "smooth",
    "left": left,
    "top": top
    "behavior": "smooth",
    "left": left,
    "top": top

behavior value can be either smooth or auto (default scroll behavior).

You can also use it in scrollIntoViewOptions for Element.scrollIntoView()


For CSS things are even more better. Just add one line of the code:

    scroll-behavior: smooth;

Again, values for scroll-behavior are smooth or auto (default).

If you add smooth scrolling to the body- browser automatically will apply this effect during scrolling to the anchor links (e.g. #fragment hash part in url automatically triggers page scrolling on load to the link with the id="fragment").


Of course you can use this API not only for global objects (window, `

`) but also for some specific elements.


To check if smooth scroll is supported in the browser use:

var isSmoothScrollSupported = 'scrollBehavior' in;

Then you can just provide polyfill with downgrade from the new API to some plugin or the old way scrolling without any effects:

var options = {
    "behavior": "smooth",
    "left": left,
    "top": top

if (isSmoothScrollSupported) {
    // Native smooth scrolling
} else if (window.jQuery && jQuery.scrollTo) {
    // jQuery scrollTo (you can change to you plugin/realization)
    $(window).scrollTo(, options.left);
} else {
    // Old way scrolling without effects


Browser Support

API is already supported in desktop Firefox out of the box and in Chrome under the Enable experimental Web Platform features flag on the chrome://flags/ page.

In Chrome up to 42 only JS part of the API is supported. In 43+ (currently it is Canary and Dev Channel) - both CSS and JS.

Smooth scrolling to the anchors currently works only in Firefox. For Chrome it’s in development.


  1. It’s a native solution. You can change browser scroll behavior with only one line of CSS!
  2. API provides a way to avoid JavaScript scroll animation- just say to the browser where to scroll instead of playing with scrollTop\scrollLeft.
  3. Because of the browser optimizations smooth scroll works smoothly (as you see it is in its name :smiley:) and fast.
Provide your code in <pre><code>...</code></pre> tags in comments