重新加载和加载时滚动到相同的位置

Question

我有一个充满 div 且长度很大的网页，所以每当我通过操作刷新我的页面或手动加载文档时，我需要将我的窗口或文档滚动到相同的位置或以前的位置，但我希望浏览器自动完成。
我在网上搜索它并没有找到任何帮助，但我知道该解决方案没有任何其他 lib 包含。

我有一个高度超过窗口高度的页面，带有一些 div 和选择框，每当我在页面中间选择任何东西时，它都会刷新我的页面并发送加载新文档 这里 我想移动到我之前选择的选择框放置 div，这样我就可以避免在每个选择上手动滚动

Answer 1

据我了解，页面的刷新不是自动的，完全取决于用户。因此，我想到的一种解决方案是使用浏览器内置的local storage，并定期使用pos 变量更新该存储。

示例代码 sn-p（直接取自文档 - 纯 javascript）：

 // Store
 localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

这样您就可以检索上次保存的滚动位置并执行必要的操作。 Jquery 也有一个围绕这个 HTML5 网络存储构建的local storage API。我已经发布了文档，它应该能让你朝着正确的方向开始。

Answer 2

首先我将位置添加到 localStorage

localStorage.setItem("scrollTop", document.body.scrollTop);

然后从它 onload(reload) 获得相同的位置

window.onload = function() {  
var scroll = parseInt(localStorage.getItem("scrollTop"));
//parseInt(localStorage.scrollTop);   
if (!isNaN(scroll))
document.body.scrollTop = scroll;

}

Answer 3

获取滚动位置

在 JavaScript 中，我们可以使用window.scollY & window.scollX 对象来获取滚动数据。

scrollFromTop = document.body.scrollY;

不忘位置

我们需要将位置添加到 localStorage 变量中，这样当用户转到不同的页面时我们不会丢失数据

localStorage.setItem("scrollY", window.scrollY);

从localStorage获取数据

要从localStorage获取数据，我们必须使用localStorage.getItem()方法，像这样。

var data = localStorage.getItem(nameOfItem);

在加载时设置值

加载时，获取我们之前设置的原始位置，然后使用window.scroll向下滚动到它

window.onload = function() {  
    var scrollY = parseInt(localStorage.getItem("scrollY"));
    if (!isNaN(scroll)) {
        window.scroll(0, scrollY);
    }
}

完整代码

这里是这个问题的完整 JavaScript 代码：

window.onunload = function() {
    localStorage.setItem("scrollY", window.scrollY);
}

window.onload = function() {  
    var scrollY = parseInt(localStorage.getItem("scrollY"));
    if (!isNaN(scroll)) {
        window.scroll(0, scrollY);
    }
}

文档链接

localStorage

scrollX

scrollY