Question

在我的网页上，我有一个溢出的div（即垂直滚动条）。在div里面，我有ids的锚点。当我在URL（mypage.html＃id）中放入其中一个ID时，我希望div而不是页面滚动到该锚点。

我如何做到这一点，最好是使用纯JavaScript？如果它太复杂了，我将使用jQuery，但我不会在这个项目中使用它来做任何事情。

Answer 1

$('.overflow').scrollTop($('#anchor').offset().top);

没有任何理由你无法将其转换为标准的javascript。

请注意，如果锚元素上有边距，则滚动将关闭。

Answer 2

您是否尝试在锚点上设置focus()？

任何带有tabindex的DOM元素都是可聚焦的，任何具有焦点的元素都将被浏览器滚动到视图中。

Answer 3

这是纯Javascript（ECMA 6）解决方案，类似于Ariel的答案。

const overflow = document.querySelector('.overflow');
const anchor = document.getElementById('anchor');

// Get the bounding client rectangles for both
// the overflow container and the target anchor
const rectOverflow = overflow.getBoundingClientRect();
const rectAnchor = anchor.getBoundingClientRect();

// Set the scroll position of the overflow container
overflow.scrollTop = rectAnchor.top - rectOverflow.top;

Answer 4

对于 2021 年几乎所有主流浏览器的用户，请使用 element.scrollIntoView()。

https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView

<块引用>

Element 接口的 scrollIntoView() 方法滚动元素的父容器，使得 scrollIntoView() 所在的元素调用对用户可见 - MDN 网络文档

示例：

var myEl = document.getElementById("child");
myEl.scrollIntoView()

或使用 Parameters -- Safari 或 Internet Explorer 不支持：

myEl.scrollIntoView({
    block: "center" // Start, center, end, or nearest. Defaults to start.
    behavior: "smooth"
})

如何将溢出的div滚动到某个＃标签（锚点）？

4 个答案: