即使在使用javascript重新加载后仍保留滚动条位置 [英] Retain scrollbar position even after reloading using javascript

问题描述

我有要求，如果我点击一个复选框的价值被提交，因此页面重新加载。现在，点击另一个复选框，我需要再次向下滚动，这不是一个好主意。所以，现在我想保留我的滚动条位置，即使页面重新加载后。在JavaScript中有任何方法来做到这一点？我已经尝试了下面的代码，但没有运气。

 < input type =checkboxonclick =myFunction（）/>一个< br /> 
 
函数myFunction（）{
 document.body.scrollTop = 500px; 
} 
  

我也浏览了很多网站，但是没有为我工作。
请帮我解决这个问题。

谢谢。

解决方案

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

<$ p $ （）{
sessionStorage.scrollTop = $（this）.scrollTop（）;
}）;

$（document）.ready（function（）{
if（sessionStorage.scrollTop！=undefined）{
$（window）.scrollTop（sessionStorage.scrollTop） ;
}
}）;

这里是 JSFiddle 演示

I have requirement where if I click on a checkbox the value gets submitted and hence the page gets reloaded. Now, to click another checkbox, i need to scroll down again which is not a better idea. So, now I want to retain my scrollbar position even after page gets reloaded. Is there any method in javascript to do that? I have tried the below code, but there was no luck.

<input type="checkbox" onclick="myFunction()"/> One <br/>

function myFunction() {
         document.body.scrollTop = 500px;
        }

I also browsed many websites but nothing worked for me. Please help me with this issue.

Thanks.

解决方案

You can use session storage to store the position then get back to the position when the page is reloaded, like this:

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

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

Here is the JSFiddle demo

这篇关于即使在使用javascript重新加载后仍保留滚动条位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！