如何将溢出的 div 滚动到某个主题标签(锚点)?

发布于 2024-12-06 05:12:11 字数 191 浏览 1 评论 0原文

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

我该如何做到这一点,最好使用纯 JavaScript?如果它太复杂,我会使用 jQuery,但我不会在这个项目中将它用于其他任何用途。

On my webpage I have an overflowed div (i.e. with the vertical scrollbar). Inside the div, I have anchors with ids. When I put one of these ids in the URL (mypage.html#id), I want the div, not the page, to scroll to that anchor.

How do I do that, preferably with plain JavaScript? If it's too complex, I'll go with jQuery, but I'm not using it in this project for anything else.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

2024-12-13 05:12:11
$('.overflow').scrollTop($('#anchor').offset().top);

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

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

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

There is no reason at all you can't convert this to standard javascript.

Note that the scroll will be off if there is a margin on the anchor element.

等你爱我 2024-12-13 05:12:11

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

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

Have you tried to set focus() on the anchor?

Any DOM element with a tabindex is focusable, and any element which has focus will be scrolled into view by the browser.

|煩躁 2024-12-13 05:12:11

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

This is a pure Javascript (ECMA 6) solution, similar to Ariel's answer.

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;
雨落星ぅ辰 2024-12-13 05:12:11

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

https://developer.mozilla.org/docs/Web/API/Element/滚动到视图

Element接口的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"
})

For those of you in nearly any major browser in 2021, use element.scrollIntoView().

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

The Element interface's scrollIntoView() method scrolls the element's
parent container such that the element on which scrollIntoView() is
called is visible to the user - MDN Web Docs

Example:

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

or with Parameters -- Not supported in Safari or Internet Explorer:

myEl.scrollIntoView({
    block: "center" // Start, center, end, or nearest. Defaults to start.
    behavior: "smooth"
})
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文