JavaScript将长页面滚动到DIV

我有一个长的HTML页面上的链接。 当我点击它时,我希望页面的另一部分的div通过滚动查看在窗口中可见。

有点像其他语言的EnsureVisible

我检查了scrollTopscrollTo但他们看起来像红鲱鱼。

谁能帮忙?

老问题,但如果有人通过谷歌(像我这样做),谁不想使用锚或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议手动做。 这涉及两个步骤:

  1. find你正在滚动的元素的位置。
  2. 滚动到该位置。

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