如何将溢出的 div 滚动到某个主题标签（锚点）？答案

【问题标题】：How do I scroll an overflowed div to a certain hashtag (anchor)?如何将溢出的 div 滚动到某个主题标签（锚点）？
【发布时间】：2011-09-22 10:04:24
【问题描述】：

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

我该怎么做，最好使用纯 JavaScript？如果它太复杂，我会使用 jQuery，但我不会在这个项目中将它用于其他任何事情。

【问题讨论】：

所以这三个答案都有效，谢谢。我仍然需要进行跨浏览器测试，但现在我使用 .focus()
所以在多个浏览器中的测试表明只有 .scrollTop() 有效。

标签： javascript anchor hashtag

【解决方案1】：

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

完全没有理由不能将其转换为标准 javascript。

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

【讨论】：

我不得不重新组织一下我的 HTML 和 CSS，但这有效（使用 .position()，而不是 .offset()）。我查看了 jQuery 源代码，将这些方法剥离出来可能有点困难。如果我能成功，我会尝试发布纯 JavaScript。
jQuery 中有太多的相互依赖关系，无法消除这一点。什么鬼，我会使用这个解决方案——我刚刚意识到，对于下一个功能，无论如何我都会使用 jQuery。感谢您的回答。
其实我会用focus()的更简单的解决方案，只是测试了一下。
我没想到你会真正重写 JQuery。我使用的那些属性是标准的 javascript 属性。只需查找如何更改和读取偏移量和位置，然后直接执行即可。（它们有时在不同的浏览器中有不同的名称。）
这是一个非常糟糕的解决方案，仅在满足大量额外假设时才有效。边距，填充，元素位置：在锚点和 div 之间的父子层次结构中的相对 - 这些的大多数组合都会破坏此方法。唯一可靠的方法是计算 div 和锚点的 document-absolute 垂直位置，并将 scrollTop 设置为它们的差值。可靠地计算文档的绝对位置非常困难。处理此问题的插件倾向于检查从到元素的路径上的每个父子对的数十种特殊情况。

【解决方案2】：

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

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

【讨论】：

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

【讨论】：

【解决方案4】：

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

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

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

例子：

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"
})

【讨论】：