CODEWITHSUNDEEP
javascript
Burger Sasha
Burger Sasha

Reputation: 175

How to smooth scroll to div on scroll using vanilla JS?

I'm looking for a way to scroll to a div on scroll - only on the landing Id not looking for full page scroll across all sections.

The JS in my snippet has worked on click event but can't get it working on scroll

document.getElementById('landing').addEventListener("scroll", function(event) {
  event.preventDefault();
  document.getElementById("main").scrollIntoView({ behavior: "smooth" });
});
#landing, #main {
  height:100vh;
}

#main {
  background: #EAEAEA;
}
<section id="landing"></section>

<section id="main"></section>

Upvotes: 0

Views: 163

Answers (1)

Andrea Viviani
Andrea Viviani

Reputation: 267

I think your problem is that #landing is not overflowing so it isn't scrolling.

I've tried to add more content to the div and it's working

Look at this: scroll() event not firing when attached to a div

Upvotes: 1

Related Questions