Retain scrollbar position even after reloading using javascript

Question

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.

Answer 1

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