我有一个长 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
| function scrollIntoView(node) {
var parent = node.parent;
var parentCHeight = parent.clientHeight;
var parentSHeight = parent.scrollHeight;
if (parentSHeight parentCHeight) {
var nodeHeight = node.clientHeight;
var nodeOffset = node.offsetTop;
var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
parent.scrollTop = scrollOffset;
}
if (parent.parent) {
scrollIntoView(parent);
}
} |
这对我有用
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
