Question

我使用脚本每10秒重新加载一次页面。我想在刷新后保留滚动位置。以下是我的脚本：

＆＃13;

<script type="text/javascript" language="javascript">
  var idleInterval = setInterval("reloadPage()", 10000);

  function reloadPage() {
    location.reload(false);
  }
</script>

＆＃13;

Answer 1

你可以这样做：

window.addEventListener('scroll',function() {
    //When scroll change, you save it on localStorage.
    localStorage.setItem('scrollPosition',window.scrollY);
},false);

然后加载：

window.addEventListener('load',function() {
    if(localStorage.getItem('scrollPosition') !== null)
       window.scrollTo(0, localStorage.getItem('scrollPosition'));
},false);

Answer 2

您可以使用会话存储来存储位置，然后返回到重新加载页面时的位置，如下所示：

$(window).scroll(function() {
  sessionStorage.scrollTop = $(this).scrollTop();
});

$(document).ready(function() {
  if (sessionStorage.scrollTop != "undefined") {
    $(window).scrollTop(sessionStorage.scrollTop);
  }
});

Answer 3

您可以在重新加载之前将位置存储在用户的localStorage上，并在打开页面时将其存储。

window.scrollTo(localStorage.scrollPos || 0, 0);

setTimeout(function(){
  //Saves the current scroll position before reloading the page.
  localStorage.setItem('scrollPos', window.pageYOffset || document.documentElement.scrollTop);
  location.reload();
}, 3000);

如何刷新代码而不丢失滚动位置？

3 个答案: