javascript - 如何在不更改页面哈希的情况下使用 javascript 导航到页面中的元素

Question

我需要通过单击按钮导航到元素“divElem1”。是否可以？如果我们在浏览器中输入此链接，浏览http://myUrl#divElem1器将导航到页面和 DIV 元素“divElem1”。必须通过 javascript 获得相同的行为。

哈希更改在我的应用程序中不起作用，因为哈希更改会触发其他事件。因此，以下将不起作用。

document.button.onclick = function () {
    location.hash = "#divElem1";
};

document.getElementById("divElem1").focus()也不起作用，因为元素是 div

score 4 · Accepted Answer

您可以scrollIntoView为此使用：

document.getElementById("divElem1").scrollIntoView()

这不会对目标元素最终的确切位置进行细粒度控制，但它将被移动到视口中。更重要的是，如果元素位于可滚动容器内，则容器和其中的元素都将移动到一个位置，以便它们在视口中可见。

score 1 · Accepted Answer

如果您想要“普通”Javascript，请使用scrollIntoView()。但它真的跳到那个位置，看到这个问题和答案。

使用 jQuery，它可以完成跳跃或一些缓和，如解释here。

建议使用缓动以提供更好的用户体验并让访问者看到并了解正在发生的事情。

2 回答 2