Smooth Animated Scrolling with JavaScript

In the past, many plugins (e.g. jQuery) have enabled the ability to cause a page to scroll down in a smooth animated fashion, rather than the sudden jarring fashion that occurs by default. This technique is often used for same-page (local) links that jump to specific sections of longform content. The following script and demo shows how you can do smooth animated in-page scrolling with plain JavaScript and no libraries or plugins.

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.