Creé un sitio web de una página usando HTML, CSS/Tailwind y Vanilla JavaScript. El problema es que cuando hago clic en uno de los enlaces de la barra de navegación, a veces funciona y otras veces se atasca; donde no responde hasta que hago clic varias veces en el enlace (la cantidad de veces no es consistente). No estoy seguro de cuál podría ser el problema.
marcado HTML:
<ul class="hidden sm:flex uppercase items-center space-x-10"> <li class="nav-link"> <a onclick="scrollToSection('#main-container')">Hjem</a> </li> <li class="nav-link"> <a onclick="scrollToSection('#services')">Tjenster</a> </li> <li class="nav-link"> <a onclick="scrollToSection('#pricing')">Priser</a> </li> <li class="nav-link"> <a onclick="scrollToSection('#contact')">Kontakt</a> </li> </ul>Código JavaScript:
function scrollToSection(element) { var element = document.getElementById(element); element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"}) }Pude arreglar esto gracias al comentario hecho por Rana; donde se señaló que solo se puede hacer clic en el texto (una etiqueta) en lugar de en todo el elemento li .
Nuevo marcado HTML:
<ul class="hidden sm:flex uppercase items-center space-x-10"> <li class="nav-link" onclick="scrollToSection('#main-container')"> <a>Hjem</a> </li> <li class="nav-link" onclick="scrollToSection('#services')"> <a >Tjenster</a> </li> <li class="nav-link" onclick="scrollToSection('#pricing')"> <a >Priser</a> </li> <li class="nav-link" onclick="scrollToSection('#contact')"> <a >Kontakt</a> </li> </ul>