DEV Community

Chris Bongers
Chris Bongers

Posted on β€’ Originally published at daily-dev-tips.com on

3

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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();
});
Enter fullscreen mode Exit fullscreen mode

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

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'});
Enter fullscreen mode Exit fullscreen mode

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!

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

SurveyJS custom survey software

JavaScript UI Library for Surveys and Forms

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

View demo

Top comments (0)

πŸ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay