首页 / 知识

关于 html:JavaScript 将长页面滚动到 DIV

2023-04-15 16:17:00

JavaScript to scroll long page to DIV

我有一个长 HTML 页面上的链接。当我单击它时，我希望页面另一部分的 div 通过滚动到视图中在窗口中可见。

有点像其他语言中的EnsureVisible。

我已经检查了 scrollTop 和 scrollTo，但它们看起来像红鲱鱼。

谁能帮忙？

老问题，但如果有人通过谷歌找到这个(就像我一样)并且谁不想使用锚或 jquery；有一个内置的 javascriptfunction 可以"跳转"到一个元素；

1	document.getElementById('youridhere').scrollIntoView();

还有什么更好的；根据 quirksmode 上的兼容性表，所有主流浏览器都支持此功能！

如果你不想添加额外的扩展，下面的代码应该可以使用 jQuery。

1
2
3
4
5
6
7
8
9
10

$('a[href=#target]').
click(function(){
var target = $('a[name=target]');
if (target.length)
{
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
return false;
}
});

JQuery ScrollTo 怎么样 - 请参阅此示例代码

1
2
3

a href="#myAnchorALongWayDownThePage"Click here to scroll/a

A name='myAnchorALongWayDownThePage"/a

没有花哨的滚动，但它应该带你到那里。

您可以使用上面提到的 Element.scrollIntoView() 方法。如果你在里面没有任何参数，你会立刻看到一个丑陋的滚动。为了防止你可以添加这个参数 - behavior:"smooth".

示例：

1	document.getElementById('scroll-here-plz').scrollIntoView({behavior:"smooth", block:"start", inline:"nearest"});

只需将 scroll-here-plz 替换为您的 div 或网站上的元素。如果您在窗口底部看到您的元素，或者位置不是您所期望的，请使用参数 block:""。您可以使用 block:"start"、block:"end" 或 block:"center"。

记住：始终在对象 {} 中使用参数。

如果仍有问题，请访问 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

这个方法有详细的文档。

滚动的困难在于，您可能不仅需要滚动页面以显示 div，还可能需要在任意数量的级别上滚动可滚动的 div。

scrollTop 属性可用于任何 DOM 元素，包括文档正文。通过设置它，您可以控制向下滚动的内容。您还可以使用 clientHeight 和 scrollHeight 属性来查看需要多少滚动(当 clientHeight(视口)小于 scrollHeight(内容的高度)时可以滚动。

您还可以使用 offsetTop 属性来确定元素在容器中的位置。

要从头开始构建一个真正通用的"滚动到视图"例程，您需要从要公开的节点开始，确保它位于其父节点的可见部分，然后对父级等重复相同的操作，直到到达顶部。

其中一个步骤看起来像这样(未经测试的代码，不检查边缘情况)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

这对我有用

1	document.getElementById('divElem').scrollIntoView();

在此处发布答案 - 解决您的问题的相同方法。

编辑：如果你想要一个平滑的滚动，JQuery 的答案非常好——我以前没有看到过这种情况。

我无法在上面的 futtta 回复中添加评论，但为了更流畅的滚动使用：

1	onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

您需要的属性是 location.hash。例如：
location.hash = \\'top\\'; // 将跳转到命名锚点 "top

我不知道如何在不使用 dojo 或类似工具包的情况下制作漂亮的滚动动画，但如果您只需要它跳转到锚点，location.hash 应该可以做到。

(在 FF3 和 Safari 3.1.2 上测试)

为什么不用命名锚？

1
2
3
4
5
6
7
8
9
10

button onClick="scrollIntoView()"/button
br
div id="scroll-to"/div

function scrollIntoView() {
document.getElementById('scroll-to').scrollIntoView({
behavior: 'smooth'
});
}

scrollIntoView 方法接受滚动选项来为滚动设置动画。

平滑滚动

1
2
3

document.getElementById('scroll-to').scrollIntoView({
behavior: 'smooth'
});

没有动画

1	document.getElementById('scroll-to').scrollIntoView();

对于滚动到 DOM 元素的一般情况，有一个 jQuery 插件，但如果性能是一个问题(什么时候不是？)，我建议手动进行。这涉及两个步骤：

查找您正在滚动到的元素的位置。

滚动到那个位置。

quirksmode 很好地解释了前者背后的机制。这是我的首选解决方案：

1
2
3

function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

它使用从 null 到 0 的强制转换，这在某些圈子里是不恰当的，但我喜欢它:) 第二部分使用 window.scroll。所以剩下的解决方案是：

1
2
3

function scrollToElement(elem) {
window.scroll(0, absoluteOffset(elem));
}

瞧！

我使用了一个轻量级的 javascript 插件，我发现它可以跨设备、浏览器和操作系统工作：zenscroll

如前所述，Element.scrollIntoView() 是一个很好的答案。由于问题说"我在一个长 HTML 页面上有一个链接......"我想提一个相关的细节。如果这是通过功能链接完成的，它可能不会产生滚动到目标 div 的预期效果。例如：

HTML:

1	a id="link1" href="#"Scroll With Link/a

JavaScript:

1
2
3
4
5
6
7
8
9

const link = document.getElementById("link1");
link.onclick = showBox12;

function showBox12()
{
const box = document.getElementById("box12");
box.scrollIntoView();
console.log("Showing Box:" + box);
}

单击 Scroll With Link 将在控制台上显示消息，但似乎没有任何效果，因为 # 会将页面带回顶部。有趣的是，如果使用 href=""，实际上可能会看到页面滚动到 div 并跳回顶部。

一种解决方案是使用标准 JavaScript 正确禁用链接：

1	a id="link1" href="javascript:void(0);"Scroll With Link/a

现在它将进入 box12 并停留在那里。

scrollTop (IIRC) 是文档中页面顶部滚动到的位置。 scrollTo 滚动页面，使页面顶部位于您指定的位置。

你需要的是一些 Javascript 操作的样式。假设您希望 div 离开屏幕并从右侧滚动，您可以将 div 的 left 属性设置为页面的宽度，然后每隔几秒将其减小一个设定的量，直到它到达您想要的位置。

这应该为您指明正确的方向。

附加：对不起，我以为你想要一个单独的 div 来从某个地方"弹出"(有点像这个网站有时会这样做)，而不是将整个页面移动到一个部分。正确使用锚点可以达到这种效果。

我个人发现上面 Josh 的基于 jQuery 的答案是我见过的最好的，并且非常适合我的应用程序……当然，我已经在使用 jQuery……我当然不会包括在内整个 jQ 库只是为了这个目的。

干杯！

编辑：好的...发布后仅几秒钟，我就在我的下方看到了另一个答案(不确定编辑后是否仍在我下方)说要使用：

document.getElementById(\\'your_element_ID_here\\').scrollIntoView();

这可以完美运行，并且比 jQuery 版本的代码少得多！我不知道 JS 中有一个名为 .scrollIntoView() 的内置函数，但它确实存在！因此，如果您想要精美的动画，请使用 jQuery。 Quick n\\'dirty...用这个！

为了平滑滚动，这段代码很有用

1
2
3
4
5
6
7
8
9
10
11
12
13

$('a[href*=#scrollToDivId]').click(function() {
if (location.pathname.replace(/^\\//,'') == this.pathname.replace(/^\\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - head_height
}, 1000);
return false;
}
}
});

如果我错了，请纠正我，但我一遍又一遍地阅读这个问题，仍然认为 Angus McCoteup 是在询问如何将元素设置为 position: fixed。

Angus McCoteup，查看 http://www.cssplay.co.uk/layouts/fixed.html - 如果您希望您的 DIV 表现得像那里的菜单，请查看那里的 CSS

视图单击链接语言