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

Question

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

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

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);