JavaScript 将长页滚动到 DIV

为什么不找个有名字的锚呢？

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


<A name='myAnchorALongWayDownThePage"></a>

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

答案张贴 here-相同的解决方案，你的问题。

编辑: 如果你想要一个平滑的滚动，JQuery 的答案是非常好的-我以前从未见过这样的操作。

JQueryScrollTo-查看此示例代码怎么样

您需要的属性是 location.hash:

Hash = ‘ top’;//将跳转到指定的锚“ top”

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

(tested on FF3 and Safari 3.1.2)

scrollTop (IIRC) is where in the document the top of the page is scrolled to. scrollTo scrolls the page so that the top of the page is where you specify.

这里需要的是一些 Javascript 操纵的样式。假设你想让 div 离开屏幕，从右边滚动进来，你需要将 div 的左边属性设置为页面的宽度，然后每隔几秒钟减少一个设置值，直到它到达你想要的位置。

This should point you in the right direction.

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

滚动的困难之处在于，您可能不仅需要滚动页面来显示 div，还需要在可滚动 div 中滚动任意级别。

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

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

要从头构建一个真正通用的“滚动到视图”例程，你需要从你想要暴露的节点开始，确保它在父节点的可见部分，然后对父节点重复同样的操作，直到你到达顶部。

其中的一个步骤如下所示(未测试的代码，不检查边界情况) :

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);
}
}

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

$('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;
}
});

如果我错了请纠正我，但是我读了一遍又一遍的问题，仍然认为 Angus McCoteup 在问如何设置一个元素的位置: 固定。

Angus McCoteup，查看 http://www.cssplay.co.uk/layouts/fixed.html-如果你想让你的 DIV 表现得像菜单一样，看看那里的 CSS

对于滚动到 DOM 元素的一般情况，有一个 JQuery 插件，但是如果性能是一个问题(什么时候不是?)我建议手动操作。这包括两个步骤:

1. Finding the position of the element you are scrolling to.
2. Scrolling to that position.

quirksmode gives a good explanation of the mechanism behind the former. Here's my preferred solution:

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

它使用从 null 到0的转换，这在某些圈子里并不合适，但是我喜欢它:)第二部分使用 window.scroll。所以剩下的解决办法就是:

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

瞧！

这是一个老问题，但是如果有人通过 google 找到了这个(就像我一样) ，并且他不想使用锚或者 jquery; 有一个内置的 javascript 函数可以“跳转”到一个元素;

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

更棒的是，根据离奇模式上的兼容性表，这是 所有主要浏览器都支持！

我个人认为上面 Josh 的基于 jQuery 的答案是我看到的最好的，并且对我的应用程序来说非常完美... 当然，我是使用 jQuery 的 已经... 我当然不会仅仅为了一个目的而包含整个 jQ 库。

干杯！

编辑: 好吧... ... 在发布这个帖子几秒钟后，我看到另一个答案只是 下面我的(不知道是否仍然低于我的编辑)说:

GetElementById (‘ your _ element _ ID _ here’) . scrollIntoView () ;

与 jQuery 版本相比，这种方法工作得非常完美，代码也少得多！我不知道在 JS 中有一个内置函数叫做。ScrollIntoView () ，但它就在那里！所以，如果你想要奇妙的动画，去 jQuery。快点，脏点，用这个！

对于平滑滚动，这个代码是有用的

$('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;
}
}
});

我不能在上面的回复中添加评论，但是为了更流畅的滚动使用:

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

这招对我很管用

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

You can use Element.scrollIntoView() method as was mentioned above. If you leave it with no parameters inside you will have an 瞬间丑陋的卷轴. To prevent that you can add this parameter - behavior:"smooth".

Example:

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

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

Remember: Always use parameters inside an object {}.

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

有关于此方法的详细文档。

如前所述，ScrollIntoView ()是一个很好的答案。既然问题是“我在一个很长的 HTML 页面上有一个链接... ...”我想提到一个相关的细节。如果这是通过一个函数链接完成的，它可能不会产生滚动到目标 div 的预期效果。例如:

HTML:

<a id="link1" href="#">Scroll With Link</a>

JavaScript:

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


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

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

一种解决方案是使用标准的 JavaScript 来正确地禁用链接:

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

现在它会去盒12和 留下那里。

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




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

ScrollIntoView 方法接受滚动-用于使滚动具有动画效果的选项。

光滑的卷轴

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

没有动画

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

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