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

Question

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

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

Answer 1

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

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

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

这样你就可以检索最后保存的滚动位置并完成所需的操作。 Jquery还有一个local storage API围绕这个HTML5 webstorage构建。我已经发布了文档，它应该让你开始朝着正确的方向前进。

Answer 2

  

首先我将位置添加到 localStorage

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

  

然后从onload（重新加载）获得相同的位置

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