Bom dia, tarde ou noite para todos. Estou tendo uma dificuldade tentando fazer um menu de navegação com link interna utilizando JavaScript puro.
O problema é que provavelmente eu estou tento é que não estou conseguindo captar os dados do usuário, porém não sei oque está errado, na ferramenta do desenvolvedor do browser (chrome) diz que o nodeList[0] sendo que deveria ser [3]. Os "ids" dos links estão adicionados
const menuItems = document.querySelectorAll('.menu a');
menuItems.forEach(item => {
item.addEventListener('click', scrollToIdOnClick);
})
function getScrollTopByHref(element) {
const id = element.getAttribute('href');
return document.querySelector(id).offsetTop;
}
function scrollToIdOnClick(event) {
event.preventDefault();
const to = getScrollTopByHref(event.target) - 150;
scrollToPosition(to);
}
function scrollToPosition(to) {
window.scroll({
top: to,
behavior: "smooth",
});
}
<header>
<ul class="menu">
<li>
<a href="#menu">Home</a>
</li>
<li>
<a href="#quemSomos">Quem Somos</a>
</li>
<li>
<a href="#produtos">Nossos Produtos</a>
</li>
<li>
<a href="#contato">Contato</a>
</li>
</ul>
</header>