0
Well I’m trying to make a smooth scroll for my pure js page, but the behavior property:"Smooth" is not working, follow the code.
Javascript
const menuItems = document.querySelectorAll('.landing__nav-bar a');
menuItems.forEach(item =>{
item.addEventListener("click", function(event){
event.preventDefault();
const element = event.target;
const id = element.getAttribute('href');
const section = document.querySelector(id);
section.scrollIntoView({
behavior:"smooth"
})
})
})
HTML
<nav class="landing__nav">
<div class="landing__nav-bar">
<a href="#"><img src="./images/Logo.svg" alt="Logo Gabriel Bryan" id="landing__logo"></a>
<ul class="landing__nav-bar--left">
<li><a href="#about-me">Sobre mim</a></li>
<li><a href="#habilities">Habilidades</a></li>
<li><a href="#">Portfólio</a></li>
<li id="landing__nav-bar--active"><a href="">Fale comigo</a></li>
</ul>
</div>
</nav>
[...]
Section where I want you to go
<img src="./images/Separator.svg" alt="tag" id="habilities">
<div class="about-me__marcation marcation-two" >
<h2>SKILLS</h2>
</div>
<section id="about-me">
<div class="about-me__content">
<div class="about-me__marcation">
<h2>SOBRE MIM</h2>
</div>
</div>
</section>
I’ve used window.scroll, window.scrollTo, and the css behavior-scroll. Nothing works, I’ve circled everything I can’t find explanation of why, the click event has the default behavior, at the moment I don’t want to use a framework to make this functionality, because I’m starting in js.