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

【问题标题】：How to navigate to an element in a page using javascript without changing page hash如何在不更改页面哈希的情况下使用 javascript 导航到页面中的元素
【发布时间】：2013-03-06 03:10:05
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript html

【解决方案1】：

您可以为此使用scrollIntoView：

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

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

【讨论】：

@T.J.克劳德感谢您的编辑。最好参考一些文档；）

【解决方案2】：

如果您想要“纯”Javascript，请使用scrollIntoView()。但它确实跳到那个位置，见this question and answer。

使用 jQuery，它可以完成 jumpy 或一些缓和，如 here 所述。

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

【讨论】：