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

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

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

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

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

---

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

是否尝试在锚元素上设置

focus（）

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

这是一个纯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;

---

对于2021年几乎所有主流浏览器中的用户，请使用

element.scrollIntoView（）

元素接口的scrollIntoView（）方法滚动元素的 父容器，使scrollIntoView（）所在的元素 调用对用户可见-MDN Web文档

例如：

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

或者使用——Safari或Internet Explorer不支持：

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

---

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