在我的网页上，我有一个溢出的div（即垂直滚动条）。在div内部，我有带有id的锚点。当我将其中一个id放入URL中（mypage.html#id）时，我希望该div而不是整个页面滚动到该锚点。如何做到这一点，最好使用纯JavaScript？如果太复杂，我会使用jQuery，但我在这个项目中没有为任何其他东西使用它。
如何滚动溢出的div到特定的hashtag（锚点）？
11
- user323094
2
这三个答案都可以，谢谢。我还需要进行跨浏览器测试，但现在我选择了 .focus()。 - user323094
经过在多个浏览器中测试，发现只有.scrollTop()起作用。 - user323094
4个回答
9
$('.overflow').scrollTop($('#anchor').offset().top);
你完全可以将这个转换为标准的 JavaScript。
请注意，如果锚元素上有边距，则滚动将会偏移。
- Ariel
5
我不得不重新组织我的HTML和CSS，但这个方法可行（使用.position()而不是.offset()）。我查看了jQuery源代码，删除这些方法可能有点困难。如果成功的话，我会尝试发布纯JavaScript代码。 - user323094
jQuery 中有太多的相互依赖关系，无法将其删除。算了，我会采用这个解决方案 - 我刚意识到下一个功能我仍然需要使用 jQuery。感谢您的答案。 - user323094
实际上，我会选择使用focus()的简单解决方案，刚刚测试过了。 - user323094
我没想到你会真的重写JQuery。我使用的那些属性是标准的JavaScript属性。只需查找如何直接更改和读取偏移量和位置即可（在不同的浏览器中有时会有不同的名称）。 - Ariel
1这是一个非常糟糕的解决方案，只有在满足大量额外假设的情况下才能工作。边距、填充、具有相对定位的元素在锚点和div之间的父子层次结构中 - 大多数这些组合都会破坏此方法。唯一可靠的方法是计算div和锚点的文档绝对垂直位置，并将scrollTop设置为它们之间的差异。可靠地计算文档绝对位置是极其困难的。处理此问题的插件往往会检查从<html>到元素的路径上每个父子对的数十个特殊情况。 - Szczepan Hołyszewski
5
你尝试过在锚点上设置focus()吗？
任何拥有tabindex属性的DOM元素都是可聚焦的，任何获得焦点的元素都会被浏览器滚动到视图中。
- Martin Jespersen
4
这是一种纯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;
- Caleb
1
对于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()
或者使用参数 -- 不支持Safari或Internet Explorer:
myEl.scrollIntoView({
block: "center" // Start, center, end, or nearest. Defaults to start.
behavior: "smooth"
})
- itsisaac19
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接