如何使用javascript导航到页面中的元素而不更改页面哈希

Question

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

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

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

由于元素是div

，

document.getElementById("divElem1").focus()也无法正常工作

Answer 1

您可以使用scrollIntoView：

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

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

Answer 2

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

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

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