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

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

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

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

272150 次浏览
小开
最佳答案

你在找 document.documentElement.scrollTop的房产。

小开

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

localStorage.topper = document.body.scrollTop;

每个页面在主体的 onLoad 中都有这个:

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

目前公认的答案是不正确的——在 Chrome 上 document.documentElement.scrollTop总是返回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" });
小开

2021年更新: 与 scrollTop不一致的浏览器似乎已经消失。

浏览器公开当前窗口滚动坐标的方式存在一些不一致之处。当使用 document.documentElement.scrollTop或 jQuery 的 $(window).scrollTop()时，麦克和 IOS上的 谷歌浏览器似乎总是返回 0。

然而，它的工作原理始终如一:

// horizontal scrolling amount
window.pageXOffset


// vertical scrolling amount
window.pageYOffset
小开

这会给你从顶部滚动的 px 值

document.documentElement.scrollTop
小开

现在，它似乎得到是工作与: window.scrollX和 window.scrollY。这可能是解决问题的另一种方法。

小开

现在您还可以使用 window.scrollTo({ top: 0, behavior: 'smooth' });来代替上面的 jQuery 解决方案进行动画处理。下面是文档: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

小开 
 var stop = true;
addEventListener('drag', (event) => {
if (event.clientY < 150) {
stop = false;
scroll(-1)
}
if (event.clientY > ($(window).height() - 150)) {
stop = false;
scroll(1)
}
if (document.body.getBoundingClientRect().y === 0){
stop = true;
}
if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
stop = true;
}
});
addEventListener('dragend', (event) => {
stop = true;
});


var scroll = function (step) {
var scrollY = $(window).scrollTop();
$(window).scrollTop(scrollY + step);
if (!stop) {
setTimeout(function () { scroll(step) }, 20);
}
}

提交答案