Vanilla JavaScript Element.scrollIntoView

Pretty sure you have seen this, you click a button and smoothly scroll to that section.

Today we are looking at how to achieve this in Vanilla JavaScript, using the Element.scrollIntoView() function.

HTML Structure

Let's setup a small demo to demonstrate this, the demo will have a fixed nabber with some buttons and four sections to which we can scroll.

<header>
  <nav>
    <a href="#" data-target="section-1" class="btn-scroll-into">Section 1</a>
    <a href="#" data-target="section-2" class="btn-scroll-into">Section 2</a>
    <a href="#" data-target="section-3" class="btn-scroll-into">Section 3</a>
    <a href="#" data-target="section-4" class="btn-scroll-into">Section 4</a>
  </nav>
</header>
<section id="section-1">
  Section 1
</section>
<section id="section-2">
  Section 2
</section>
<section id="section-3">
  Section 3
</section>
<section id="section-4">
  Section 4
</section>

As you can see nothing fancy, note that we added data-target attributes to our header navigation items and a class of btn-scroll-into. Read more about data-attributes.

CSS for our scrollIntoView demo

body {
  padding-top: 50px;
}
header {
  position: fixed;
  height: 50px;
  background: #345995;
  width: 100%;
  top: 0;
}
header nav {
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
header nav a {
  padding: 5px 10px;
  background: #03cea4;
  border-radius: 10px;
  color: #fff;
  text-decoration: none;
}
section {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 32px;
  background: #ca1551;
}
section:nth-child(odd) {
  background: #fb4d3d;
}

Really nothing special here, we offset our body by 50 pixels since we are using a fixed header (that will always stay on the top of our screen). And add some 100% sections by utilising viewport units and flex box centering.

The Vanilla JavaScript for scrollIntoView

document.addEventListener('click', function(event) {
  if (!event.target.matches('.btn-scroll-into')) return;

  event.preventDefault();

  var element = document.getElementById(event.target.dataset.target);

  element.scrollIntoView();
});

Yep, that is all! We added an event listener, which will fire each time we click; we then check if the element we click has the class btn-scroll-into. We then define an element variable by using getElementById and passing the dataset attribute called target.

Then all we do is say element.scrollIntoView(); this will put the element we selected at the top of our page.

You can see it in action on this Codepen:

View on Codepen.

ScrollIntoView options

This is now a hard switch, but it allows options which are the following:

• behavior: auto or smooth
• block: start, center, end or nearest (default: start)
• inline: start, center, end or nearest (default: nearest)

So let's make it scroll smoothly:

element.scrollIntoView({behavior: 'smooth'});

View this smooth scroll on Codepen:

View on Codepen.

Thank you for reading, and let's connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on Facebook or Twitter