JavaScript scrollIntoView 随机卡住答案

【问题标题】：JavaScript scrollIntoView gets randomly stuckJavaScript scrollIntoView 随机卡住
【发布时间】：2021-12-19 18:08:05
【问题描述】：

我使用 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"})
}

【问题讨论】：

也许您点击了错误的位置。您的 text(link) 只能点击并执行 func 而不是 li 标签
是的，谢谢你。

标签： javascript html onepage-scroll

【解决方案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>

【讨论】：