How To Create a Smooth Scrolling Effect (Using JavaScript or CSS)

A smooth scrolling effect creates a more natural, polished experience when moving between sections of a page. It’s especially useful for long-form content with in-page links or for “back to top” buttons. In this tutorial, we’ll look at two simple ways to add smooth scrolling to your site: one with JavaScript and one with CSS.

Smooth Scrolling with JavaScript

Suppose the page has the following list of local links, followed by paragraphs of text separated by headings that have IDs that match the local links:

<ul class="links">
    <li><a href="#one">Section One</a></li>
    <li><a href="#two">Section Two</a></li>
    <li><a href="#three">Section Three</a></li>
    <li><a href="#four">Section Four</a></li>
    <li><a href="#five">Section Five</a></li>
    <li><a href="#six">Section Six</a></li>
</ul>Code language: HTML, XML (xml)

We can use the following JavaScript to enable smooth animated scrolling to the different section headings:

let btns = document.querySelectorAll('.links a'); 

for (i of btns) { 
  (function(i) { 
    i.addEventListener('click', function(e) { 
      document.getElementById(this.hash.split('#')[1]).scrollIntoView({ 
        behavior: 'smooth' 
      }); 
      e.preventDefault(); 
    }); 
  })(i); 
}Code language: JavaScript (javascript)

The code above loops through all the targeted links, adding an event listener to each one and it uses the scrollIntoView() method to scroll to the specified element. The method takes an optional options object that defines the scroll behavior.

We can also include a “Scroll back to top” button that smooth-scrolls back to the top of the page:

document.querySelector('.top').addEventListener('click', function () { 
  window.scrollTo({ 
    top: 0, 
    behavior: 'smooth' 
  }) 
}, false);Code language: JavaScript (javascript)

This time we’re using the scrollTo() method which can also define the scroll behavior. See the demo below for a full working example.

Smooth Scrolling with CSS

You don’t always need JavaScript to get smooth scrolling. Modern browsers support this behavior natively with a single CSS rule. By adding the following to your stylesheet, any in-page link (such as <a href="#section">) will scroll smoothly to its target:

html { scroll-behavior: smooth; }

That’s all it takes. No extra code. When a user clicks a local link, the browser will automatically handle the animated scrolling.

If your page has a fixed header that overlaps section headings, you can also use the scroll-margin-top property to offset the scroll position:

h2, h3, h4 { scroll-margin-top: 80px; /* adjust to your header height */ }

This ensures that the heading isn’t hidden behind the header when the scroll finishes.