页面刷新不应该导致页面向上滚动，使用 jquery答案

【问题标题】：Page refresh should not cause page to scroll up, using jquery页面刷新不应该导致页面向上滚动，使用 jquery
【发布时间】：2020-08-06 11:36:34
【问题描述】：

我编写了一段代码，每 30 秒会导致页面重新加载。

refreshRequest = setInterval(function() {
  document.location.reload(true)
}, 30000);

但我担心的是，当我向下浏览页面并在 30 秒后页面刷新时，我的页面再次滚动到顶部。我在代码中看到，当页面刷新时，下面的代码就会被执行。

var diaryScroll = $(".diaryBody").scrollTop();
$(".diaryBody")[0].scrollTop = diaryScroll;

将页面带到顶部。如果我使用代替.scrollTop，我可以知道哪个元素或组件会保留页面的位置吗？

谢谢，切碎

【问题讨论】：

当你的页面被重新加载时，所有的变量都会被重置，所以diaryScroll不能保持这个值。您可以尝试使用localStorage，或者您可以将 URL 中的滚动位置传递给重新加载
您好，先生，感谢您抽出宝贵时间 :)，我尝试在重新加载中删除 true，但仍然没有用。如何在 URL 中传递滚动位置？
是的，我在阅读文档后删除了我的评论，该参数是强制从服务器获取页面，以防止浏览器从缓存加载，所以它可能不是你的好解决方案想要
每 30 秒重新加载一次页面似乎......不好。这样做的目标是什么？您是否尝试每 30 秒从服务器获取新数据？无需重新加载整个页面，只需使用 AJAX 仅获取更新的数据并将更新的数据写入页面。它减少了网络上的流量，提供了更好的用户体验，并且还有一个额外的好处，那就是没有您当前正在尝试解决的问题。

标签： jquery scrolltop

【解决方案1】：

您可以使用此方法将滚动位置存储在 localStorage 中：

$(function () {
    if (!localStorage.scroll_position) {
        localStorage.scroll_position = 0;
    }
    // on load scroll to last stored scroll location
    $(document).scrollTop(localStorage.scroll_position);
});


$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    // store last scroll location
    localStorage.scroll_position = scroll;
});

顺便说一句，我想知道您为什么使用页面重新加载来显示可以使用 ajax 顺利加载页面的最新更新。

【讨论】：