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

Answer 2

Setting scrollTop does do it (you set it on documentElement in most browsers, but on body on others; simplest thing is to just set it on both). Also, the value is a number (no px).

But you have to do it at the right time, which is after the page has reloaded, possibly after a setTimeout or even in an onload callback (you'll need to experiment to figure out which works on your page). Here's the setTimeout example:

setTimeout(function() {
    document.documentElement.scrollTop =
        document.body.scrollTop = 500;
}, 0);

However, I wouldn't do that. Instead, I'd submit the checkbox value via ajax and not reload the page. Even if you scroll down to where the user was after the reload, it's still a surprise for a page to reload when you check a box (I remember what Amazon used to do that) and it takes time. Ajax would let it happen in the background without interrupting the user.

Answer 3

It wont be a good UI practice to create such behaviour, you should try using AJAX if you want to notify server as soon as the checkbox is toggled. Or simply use html form if you wish to send response of other elements as a bunch to the server.

Just in case, if you still want to achieve the functionality, your above code will not work since as soon as the page reloads, the entire dom is reloaded. This could still be achieved using cookies or localstorage in which you can set a flag or a value (in integer) to scroll. On page load check if any value is set to that particular cookie or localStorage variable and then scroll to the given value. Please note this is a very bad practice in terms of UI. I highly recommend you to use ajax or submit the values together using a form.