JavaScript将长页面滚动到DIV
我有一个长的HTML页面上的链接。 当我点击它时，我希望页面的另一部分的div通过滚动查看在窗口中可见。
有点像其他语言的EnsureVisible 。
我检查了scrollTop和scrollTo但他们看起来像红鲱鱼。
谁能帮忙？
老问题，但如果有人通过谷歌（像我这样做），谁不想使用锚或jQuery的; 有一个内置的javascript函数来“跳转”到一个元素;
document.getElementById('youridhere').scrollIntoView();
甚至更好; 根据quirksmode上的兼容性表， 所有主stream浏览器都支持这个表。
怎么样的JQuery ScrollTo – 看到这个示例代码
如果你不想添加额外的扩展，下面的代码应该与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; } });
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a> <A name='myAnchorALongWayDownThePage"></a>
没有花哨的滚动，但它应该带你到那里。
滚动的困难在于，您不仅需要滚动页面来显示div，而且您还可能需要在任意级别的滚动div内滚动。
scrollTop属性可用于任何DOM元素，包括文档主体。 通过设置它，你可以控制滚动的东西。 您还可以使用clientHeight和scrollHeight属性来查看需要多less滚动（当clientHeight（视口）小于scrollHeight（内容的高度）时可以滚动。
您还可以使用offsetTop属性来确定元素所在的容器中的哪个位置。
为了从头开始build立一个真正的通用目的“滚动查看”例程，你需要从你想要暴露的节点开始，确保它在父节点的可见部分，然后对父节点重复相同的操作直到你到达顶部的方式。
这一步看起来像这样（未经testing的代码，而不是检查边缘情况）：
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的答案是非常好的 – 我没有看到在行动之前。
您需要的属性是location.hash。 例如：
location.hash ='top'; //会跳转到指定的锚点“顶部
我不知道如何在不使用dojo或者类似的工具包的情况下做出好的滚动animation，但是如果你只是需要它跳转到一个锚点，那么location.hash应该这样做。
（在FF3和Safari 3.1.2上testing）
为什么不是一个命名的锚？
这对我有效
document.getElementById('divElem').scrollIntoView();
我不能在上面的futtta的回复中添加评论，但为了更平滑的滚动使用：
onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
scrollTop（IIRC）是页面顶部滚动到文档中的位置。 滚动滚动页面，使页面的顶部是您指定的位置。
你需要的是一些JavaScript操作样式。 假如你想让div离开屏幕，并从右侧滚动，你可以将div的左边属性设置为页面的宽度，然后每隔几秒钟将其减less一定量，直到它到达你想要的位置。
这应该指向正确的方向。
另外：对不起，我以为你想要一个单独的div从某个地方“popup”（有时候就像这个网站那样），而不是把整个页面移动到一个部分。 正确使用锚将会达到这个效果。
有一个jQuery插件的滚动到DOM元素的一般情况下，但如果性能是一个问题（什么时候不是？），我会build议手动做。 这涉及两个步骤：
- find你正在滚动的元素的位置。
- 滚动到该位置。
quirksmode给出了前者背后的机制的一个很好的解释。 这是我的首选解决scheme：
function absoluteOffset(elem) { return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent); }
它使用从null到0的铸造，这在一些圈子里是不合适的礼仪，但我喜欢它:)第二部分使用window.scroll 。 所以其余的解决scheme是：
function scrollToElement(elem) { window.scroll(absoluteOffset(elem)); }
瞧！
我个人发现乔希的基于jQuery的答案是最好的，我看到了，并为我的应用程序完美工作…当然，我已经使用jQuery …我当然不会包括整个jQ库只是为了一个目的。
干杯!
编辑：好吧…发布这个仅仅几秒钟后，我看到另一个答案正好在我的下面 （不知道如果仍然在我下面编辑）说，使用：
的document.getElementById（ 'your_element_ID_here'）scrollIntoView（）;
这完美的工作，比jQuery版本less得多的代码！ 我不知道在JS中有一个内置的函数叫.scrollIntoView（），但它是！ 所以，如果你想要的花式animation，去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; } } });
纠正我，如果我错了，但我一遍又一遍地阅读这个问题，仍然认为安格斯McCoteup是问如何设置一个元素的位置：固定。
安格斯McCoteup，检查http://www.cssplay.co.uk/layouts/fixed.html – 如果你想你的DIV行为像一个菜单那里，看看在那里的CSS
