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

121

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

我的表格很长，需要根据用户的操作/输入进行刷新。发生这种情况时，页面会重置到最顶部，这对用户来说很烦人，因为他们必须向下滚动到他们所处的位置。

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

javascript html

— y
source

AJAX驱动的表单不是防止这些影响的更好方法吗（当然，如果XHR不可用，它还会提供一个后备功能）？页面重新加载将使页面跳到顶部并再次返回，这可能会令人讨厌。

— Marcel Korpel，2010年

117

您在寻找document.documentElement.scrollTop物业。

— ak
source

谢谢，我发现了这一点：articles.sitepoint.com/article/javascript-from-scratch/6，并修改了getScrollingPosition()将值存储在隐藏变量中。然后在刷新页面的html中使用<body onLoad="window.scrollTo(x,y)，其中x和y是隐藏值中的值！

— xyz

46

我发现，至少在Ubuntu上的Chrome上，它document.documentElement.scrollTop始终返回0。document.body.scrollTop但是，似乎可以正常工作。另一方面，在Ubuntu上使用Firefox，反之亦然-使用，您将获得0，使用body，将获得正确的数量documentElement。有什么想法吗？

— tobek 2014年

12

由于该scrollTop属性不适用于所有浏览器，因此此答案不正确。检查window.pageXOffset并window.pageYOffset获得更好的结果。

— gyo

135

当前接受的答案不正确- document.documentElement.scrollTop在Chrome上始终返回0。这是因为WebKit body用于跟踪滚动，而Firefox和IE使用html。

要获得当前职位，您需要：

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

您可以将页面下方的当前位置设置为1000px，如下所示：

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

或者，使用jQuery（在使用时对其进行动画处理！）：

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

— 托贝克
source

5

gyo的回答，window.pageYOffset如果您使用window.scrollBy()或window.scrollTo()方法，则建议使用更清洁的方法。

— igorsantos

32

浏览器在显示当前窗口滚动坐标方面存在一些不一致之处。使用或jQuery 时，Mac和iOS上的Google Chrome似乎总是返回。0document.documentElement.scrollTop$(window).scrollTop()

但是，它与以下各项保持一致：

// horizontal scrolling amount
window.pageXOffset

// vertical scrolling amount
window.pageYOffset

— yo
source

我也注意到了，这是Mac和iOS上的错误吗？

— 亚历山大·金

@AlexanderKim我认为这可能与某些CSS规则（例如溢出）的解释方式有关，并且据报道，如果同时检查body和html元素上的scrollTop，则它可以工作。但是，为了避免测试和调试，我始终依靠安全一致的pageXOffset / pageYOffset。

— gyo19年

非常感谢您的正确回答

— Michael Paccione

5

我使用HTML5本地存储解决方案...我所有的链接都调用了一个函数，该函数在更改window.location之前对此进行了设置：

localStorage.topper = document.body.scrollTop;

并且每个页面在主体的onLoad中都有此内容：

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

— AX Labs
source

3

使用localStorage的setItem（）和getItem（）而不是在每次单击链接时备份滚动位置，在离开页面时将其存储一次，会更优雅：window.addEventListener（“ beforeunload”，function（）{localStorage。 setItem（“ scrolly”，document.documentElement.scrollTop || document.body.scrollTop）;}）;

— StanE