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

问题描述：

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

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

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

答

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

谢谢，我发现这个：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

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

答

此外，你可能想看看jQuery.ScrollTo plugin

答

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

localStorage.topper = document.body.scrollTop;

每个网页有这身体的onLoad：

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

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

答

目前公认的答案是不正确 - 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" });

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

答

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

然而，它都能正常工作：

// horizontal scrolling amount 
window.pageXOffset 

// vertical scrolling amount 
window.pageYOffset

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

相关推荐