Estoy tratando de agregar una función de desplazamiento a mi página de destino para que cuando se haga clic en el enlace de la barra de navegación, se desplace suavemente a la sección. en lugar de CSS, debería usar JS, 'addEventListener', 'preventDefault' y '' scrollIntoView() para lograr esto. He estado intentando y tratando durante días, simplemente no funciona, ¡por favor ayúdenme!
aquí está mi enlace CodePen:
Reescribí el código que comentaste, pero también cambié una parte importante cuando creaste los enlaces del menú.
const clickItems = document.querySelectorAll('.menu__link'); for (const clickItem of clickItems) { clickItem.addEventListener("click", function(e){ e.preventDefault(); document.querySelector(e.currentTarget.dataset.href).scrollIntoView({behavior: "smooth"}); }); } La principal diferencia es que cambié su atributo href en los enlaces del menú a un atributo data-href , de lo contrario, el comportamiento nativo se desplazaría hacia abajo a sus secciones, como lo haría cualquier enlace.
navList += `<li id="${sectionName}"> <a class="navbar__menu menu__link" data-href="#${section.id}">${sectionName}</a></li>`;Puede buscar el elemento y moverse directamente
document.getElementById("myElement").scrollIntoView();"comportamiento" Define la animación de transición. Una de auto o suave. El valor predeterminado es automático.
Publicación: ¿Cómo me desplazo a un elemento usando JavaScript?