Vanilla JavaScript Element.scrollIntoView

I’m sure you have seen this: you click a button and smoothly scroll to that section.

Today we are looking at implementing a smooth scroll into view in Vanilla JavaScript by using the Element.scrollIntoView() function.

HTML Structure permalink

Let’s set up a small demo to demonstrate this. The demo code will have a fixed header 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 permalink

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 use 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.

JavaScript scrollIntoView permalink

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

  event.preventDefault();

  const 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 the example in action on this Codepen permalink

See the Pen Vanilla JavaScript Element.scrollIntoView by Chris Bongers (@rebelchris) on CodePen.

ScrollIntoView options permalink

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 example on Codepen permalink

See the Pen Vanilla JavaScript Element.scrollIntoView Smooth by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect! permalink

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