2010-11-04 98 views
64

如何获取并设置当前网页滚动位置?如何获取并设置当前网页滚动位置?

我有一个很长的形式,需要根据用户操作/输入进行刷新。发生这种情况时,页面会重置到最顶端,这对用户来说很烦人,因为他们必须回滚到他们所在的位置。

如果我可以在重新加载页面之前捕获当前滚动位置(在隐藏输入中),那么在重新加载之后,我可以将其重新设置。

+0

不是一个AJAX驱动形式没有更好的办法来防止这些影响(当然提供一个备用的情况下XHR不可用)?页面重新加载将使页面跳转到顶部并返回,这是一个可能令人讨厌的怪癖。 – 2010-11-04 13:13:56

回答

42

您正在寻找document.documentElement.scrollTop住宅。

+0

谢谢,我发现这个:http://articles.sitepoint.com/article/javascript-from-scratch/6并修改'getScrollingPosition()'将值存储在隐藏变量中。然后在刷新页面的html中使用' xyz 2010-11-04 14:32:48

+37

我在Ubuntu上至少发现Chrome ,那么'document.documentElement.scrollTop'总是返回0.但是,'document.body.scrollTop'似乎可以工作。另一方面,Ubuntu上的一个Firefox反过来也是如此 - 你可以用'body'获得0和'documentElement'正确的数量。想知道什么给了? – tobek 2014-01-04 04:25:01

+1

使用scrollX http://dev.w3.org/csswg/cssom-view/#dom-window-scrollx – Adria 2015-01-30 14:19:30

5

我与HTML5本地存储空间的解决方案去了......我所有的链接调用哪个改变了window.location之前设置此功能:

localStorage.topper = document.body.scrollTop; 

每个网页有这身体的onLoad:

if(localStorage.topper > 0){ 
    window.scrollTo(0,localStorage.topper); 
    } 
+2

中使用一个示例使用localStorage的setItem()和getItem()会更优雅,并且在每次链接单击时备份滚动位置,离开页面时将其存储一次:window.addEventListener (“beforeunload”,function(){localStorage.setItem(“scrolly”,document.documentElement.scrollTop || document.body.scrollTop);}); – StanE 2015-05-15 23:26:06

87

目前公认的答案是不正确 - document.documentElement.scrollTop总是在Chrome返回0。这是因为WebKit使用body来跟踪滚动,而Firefox和IE使用html

要获取当前位置,你想:

document.documentElement.scrollTop || document.body.scrollTop 

可以将当前的位置设定为1000像素下的页面,如下所示:

document.documentElement.scrollTop = document.body.scrollTop = 1000; 

或者,使用jQuery(动画它,而你):

$("html, body").animate({ scrollTop: "1000px" }); 
+3

gyo的回答,如果你使用'window.scrollBy()'或'window.scrollTo()'方法,'window.pageYOffset'更清晰。 – igorsantos07 2017-04-24 04:50:14

11

浏览器如何暴露当前的窗口滚动坐标有些不一致阿泰。 谷歌浏览器在Mac和iOS似乎总是返回0当使用document.documentElement.scrollTop或jQuery的$(window).scrollTop()

然而,它都能正常工作:

// horizontal scrolling amount 
window.pageXOffset 

// vertical scrolling amount 
window.pageYOffset