Native smooth scrolling

Smoothly scroll to elements on the document with zero dependencies. Yup, that’s right. Lovely smooth scrolling, with no need to load JS libraries.

How to use native smooth scrolling in Javascript

With just a couple of lines of code, you can smoothly scroll users to elements with Javascript.

el.scrollIntoView({
    behavior: 'smooth'
})

 

How to use native smooth scrolling in pure CSS

Depending on your use case, it might be possible to smoothly scroll a user to an element with pure CSS. For example, from a back to top link like to.

<style>
  html {
      scroll-behavior: smooth;
  }
</style>

<a href="#top" title="Back to top">Back to top</a>

See this Codepen for an example.

 

Potential issues

There has been a few who have mentioned on social media about how scroll-behavior: smooth; feels buggy when using internal page search in the browser. Chris Coyier mentioned this on Twitter with Christian Schaefer suggesting that perhaps html:focus-within would be a better solution than applying directly to html. The only other caveat, according to Christian Schaefer, is that in order for this to work, you also need to add tabindex="-1" to elements you wish to be scrolled to smoothly.

See this Codepen for an example.

 

Browser support for native smooth scrolling

Support is actually pretty good, but (at the time of writing) there are a few issues on Safari, without it supporting the smooth behavior options.

Support for scrollIntoView
Support for scroll-behavior



What to read next

More from our resources, blogs and case studies

Find this resource useful?

I hope so. I want everyone to be able to benefit from articles like this one. That is why I'm kindly asking for your support.

These resources take time to research and write. The site is run by one person, with occasional volunteer contributors in spare time. Please consider supporting the project if you can.

Plant a tree with Ecologi or Donate £3