Vanilla JavaScript Element.scrollIntoView

— 7 minute read

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 permalink

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 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 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 permalink

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:

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 on Codepen:

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