jquery 重新加载和加载时滚动至相同位置

fdbelqdn  于 2023-11-17  发布在  jQuery
关注(0)|答案(4)|浏览(133)

我有一个网页,是充满了巨大的长度div的,所以每当我刷新我的页面或手动文档加载通过行动,我需要滚动我的窗口或文档到相同或以前的位置,但我希望这是由浏览器自动完成。
我在网络上搜索了一下,没有找到任何帮助,但我知道这个解决方案是存在的,没有任何其他的lib包含。
我有一个页面的高度超过窗口高度与一些div和选择框每当我选择任何东西在页面中间,它刷新我的页面,并发送负载新的文件这里我想移动到我以前选择的选择框放置div,这样我就可以避免手动滚动每个选择

uqjltbpv

uqjltbpv1#

据我所知,页面的刷新不是自动的,完全取决于用户。所以,我想到的一个解决方案是使用浏览器内置的local storage,并定期使用pos变量更新该存储。
示例代码片段(直接取自文档-纯JavaScript):

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

字符串
这样你就可以检索最后保存的滚动位置并做必要的事情。Jquery也有一个围绕这个HTML5网络存储构建的local storage API。我已经发布了文档,它应该能让你朝着正确的方向开始。

vc9ivgsu

vc9ivgsu2#

首先,我将位置添加到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;


}

6fe3ivhb

6fe3ivhb3#

获取滚动位置

在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

omqzjyyz

omqzjyyz4#

我就是这样解决这个问题的

function scrollWin() {
    var scrolledTo = localStorage.getItem('scrolledTo');
    $('html, body').animate({ scrollTop: scrolledTo }, 50);
}

$(document).ready(function () {
    scrollWin();
});

$(window).scroll(function (event) {
    var scrolledTo = $(window).scrollTop();
    localStorage.setItem('scrolledTo', scrolledTo);
});

字符串

相关问题