I have made a one-page website using HTML, CSS/Tailwind, and Vanilla JavaScript. The issue is that when I click on one of the navbar links sometimes it works, and sometimes it gets stuck; where it does not respond until I click multiple times on the link(The number of times is not consistent). Not sure what the issue could be.
HTML markup:
<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>
JavaScript Code:
function scrollToSection(element) {
var element = document.getElementById(element);
element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
}
I was able to fix this thanks to the comment made by Rana; where it was pointed out that only the text(a tag) is clickable rather than the entire li element.
New HTML markup:
<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>