javascript - JavaScript scrollIntoView 随机卡住

Question

我使用 HTML、CSS/Tailwind 和 Vanilla JavaScript 制作了一个单页网站。问题是，当我单击导航栏链接之一时，有时它会起作用，有时会卡住；直到我在链接上多次单击它才响应（次数不一致）。不确定问题可能是什么。

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>

JavaScript 代码：

function scrollToSection(element) {
    var element = document.getElementById(element);
    element.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"})
}

Answer 1

由于 Rana 的评论，我能够解决这个问题；有人指出，只有文本（一个标签）是可点击的，而不是整个li元素。

新的 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>