JavaScript scrollIntoView 随机卡住

Question

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

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>

JavaScript scrollIntoView 随机卡住

JavaScript scrollIntoView gets randomly stuck

html

javascript

onepage-scroll