How to Implement Smooth Scrolling With Vanilla JavaScript

In this new tutorial, we’ll learn how to implement smooth scrolling in our web pages. We’ll start with a common jQuery approach for creating this functionality. Then, we’ll get rid of jQuery and discuss two pure JavaScript solutions.

Just to give you an idea of what we’ll discuss during this tutorial, check out one of the demos we’ll be building:

Let’s get started!

1. Begin With the HTML Markup

For demonstration purposes, we’ll define a header wrapped within a container and four sections. Inside the header, we’ll specify a navigation menu and an introductory text. 

Each section will have an id whose value matches the href value of a menu link. This association (what we refer to as a fragment identifier) will allow us to jump to specific parts of our page.

Here’s the HTML:

<div class="container">
  ...
  <header class="page-header">
    <nav>
      <ul>
        <li>
          <a href="#...">...</a>
        </li>
        <!-- more links -->
      </ul>
    </nav>
    <div class="header-text">...</div>
  </header>
</div>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
<section class="section" id="">...</section>

2. Define the Styles

The CSS part will be pretty straightforward, nothing extraordinary.

First, we’ll use CSS Grid to layout the page header. The menu will cover one-fourth of the available width, while the text the remaining three-fourths (the responsive stuff isn’t really important here):

.page-header {
  display: grid;
  grid-column-gap: 30px;
  grid-template-columns: 1fr 3fr;
  padding: 40px 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin-bottom: 150px;
}

.header-text {
  font-weight: bold;
}

Coming up next, we’ll apply some styles to the sections. Most importantly, we’ll ensure that they will be tall enough, so there’s adequate scrolling inside the page for the effect:

/*CUSTOM VARIABLES HERE*/

.section {
  padding: 150px 0;
}

.section:nth-of-type(1),
.section:nth-of-type(3) {
  background: var(--beige);
}

.section-text {
  margin: 50px 0;
  max-width: 800px;
}

.section-btn {
  display: inline-block;
  color: var(--beige);
  background: var(--black);
  min-width: 200px;
  height: 50px;
  padding: 9px 40px;
  text-align: center;
}

That’s all we need so far! If we now click on a specific link, we’ll immediately jump to the relevant page section. 

Check our our initial demo:

Basic HTML stuff, right? Let’s now take it a step further and learn how to navigate to the sections smoothly.

3. Smooth Scrolling With jQuery

We’ll start with the popular jQuery approach. To create smooth scrolling with jQuery, we’ll take advantage of its animate() method. 

Each time we click on a navigation link, we’ll do the following things:

1. Cancel its default behavior to jump to the corresponding section.
2. Grab its href attribute value. 
3. Smoothly navigate to the associated section by animating the scrollTop property. Note that the animate() method allows us to adjust the animation speed. In our case, the animation will last 800ms.

Here’s the jQuery code:

$(".page-header ul a").on("click", function (e) {
  // 1
  e.preventDefault();
  // 2
  const href = $(this).attr("href");
  // 3
  $("html, body").animate({ scrollTop: $(href).offset().top }, 800);
});

And the related demo:

4. Smooth Scrolling With Vanilla JavaScript

At this point, we’ll throw away jQuery and concentrate on a native JavaScript solution. Happily enough, it’s much simpler than you might expect. 

As we’ll see in a later section, even though browser support isn’t ideal, there are things we can do to overcome this limitation.

Using the scroll() Method

First, we’ll use the scroll() method. The logic for this approach is similar to the previous jQuery implementation. 

The trick here is that inside this method, we’ll determine the scrolling behavior via the behavior configuration property. Possible values are auto (default) and smooth. As soon as we set its value to smooth, the magic will happen and we’ll be able to navigate to the target section smoothly.

It’s worth mentioning that at the time of this writing, there isn’t any speed option defined in the specification for manipulating the animation speed. If that doesn’t work for your needs, you might have to extend the native functionality by writing custom code.

Here’s the required code:

const links = document.querySelectorAll(".page-header ul a");

for (const link of links) {
  link.addEventListener("click", clickHandler);
}

function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");
  const offsetTop = document.querySelector(href).offsetTop;

  scroll({
    top: offsetTop,
    behavior: "smooth"
  });
}

Tip: Instead of the scroll() method, we could equally have used the scrollTo() and scrollBy() methods. The effect should look the same.

Here’s the associated demo:

Using the scrollIntoView() Method

Beyond the aforementioned scroll methods which are attached to the window object, there’s also the scrollIntoView() method which applies to DOM elements. This can accept as well the behavior property with the value set to smooth.

Here’s the code needed for this implementation:

const links = document.querySelectorAll(".page-header ul a");

for (const link of links) {
  link.addEventListener("click", clickHandler);
}

function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");

  document.querySelector(href).scrollIntoView({
    behavior: "smooth"
  });
}

The related demo:

Polyfills Please?

Native smooth scrolling is great, yet as with many other new CSS goodies, it lacks wide support. If browser support is important for you, you can take a look at the Smooth Scroll polyfill developed by Dustan Kasten.

To include it in your projects, grab it from a CDN, then insert it as a script tag before your JavaScript code.

Here’s one of our aforementioned JavaScript demos with the polyfill embedded:

For example, with this polyfill, the animation in browsers like Microsoft Edge 18 and devices like iPad Mini 4 should work as expected.

Conclusion

That’s it, folks! Today we covered a JavaScript tip which helps us achieve smooth scrolling without using any external library.

I hope you found this exercise useful and have enhanced your JavaScript knowledge a little bit. If you have ever built something similar in the past, please share it with us in the comments below!

Challenge: before closing, I have a small challenge for you! Your job is to extend one of our JavaScript demos by including a “back to top” button. The final functionality should work like this demo. Do you accept the challenge? If so, I’d be glad to see your solution in the comments below!

As always, thanks a lot for reading!