How to Create Native Smooth Scrolling with JavaScript (or CSS)

A few days ago, I was rendering out a list in Vue that needed some smooth scrolling.

Naturally, I turned to a JavaScript solution, but lo and behold, CSS had me covered.

For simplicity’s sake, suppose we have a navbar that brings us to another section of a webpage.

<nav>
    <ul>
        <a href="#one"><li>One</li></a>
        <a href="#two"><li>Two</li></a>
        <a href="#three"><li>Three</li></a>
    </ul>
</nav>

We also have content to render out.

<div class="content">
    <div id="one"><h1>One</h1></div>
    <div id="two"><h1>Two</h1></div>
    <div id="three"><h1>Three</h1></div>
</div>

Smooth Scrolling using CSS#

In order to demo smooth scrolling, we need to style each page accordingly:

.content div {
  width: 100%;
  height: 100vh;
  text-align: center;
}
nav {
  position: fixed;
}
#one {
  background: #fff;
}
#two {
  background: #e0e0e0;
}
#three {
  background: #fff;
}

The secret here is to add scroll-behavior: smooth; to the <html> element.

html {
  scroll-behavior: smooth;
}

This will give us a basic template for smooth scrolling pages using a navbar. We can also isolate smooth scrolling to different sections of the webpage. It just depends on where you put the scroll-behavior attribute.

Smooth Scrolling using JavaScript#

We can also smooth scroll in JavaScript.

If we know the exact location of the element we want to scroll to, we can scroll to a specific section of the page by using window.scroll() and modifying top.

window.scroll({
  top: 4000,
  left: 0,
  behavior: "smooth",
});

If we know the offset from the current location, we can use window.scrollBy() and, once again, modify top.

window.scrollBy({
  top: 200,
  left: 0,
  behavior: "smooth",
});

I find myself mostly using this last option, where we scroll to a specific element with a combination of document.querySelector() and scrollIntoView().

document.querySelector("#one").scrollIntoView({
  behavior: "smooth",
});

How to Create Native Smooth Scrolling with JavaScript (or CSS)

Smooth Scrolling using CSS#

Smooth Scrolling using JavaScript#

Related in JS