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.

I think generally this design is not good. Use AngularJS or jQuery ajax instead and do submit in background. There may be a way to store this in Cookies but again that's not a good solution. — Ehsan88, Dec 14 '15 at 07:08
You can add an `id` to the container of your checkbox and while reloading the page, append `#container_id` to the URL — Akshay, Dec 14 '15 at 08:51
@Akshay, I have id to my checkbox. But how to append it to the the URL? — Shruthi Sathyanarayana, Dec 14 '15 at 09:45

score 42 · Accepted Answer · answered Dec 14 '15 at 07:18

42

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

answered Dec 14 '15 at 07:18

Ahs N

8,233
1
28
33

@ Ahs N, thanks for your reply. But the above code is not working for me. It doesnt't come to 500px position. What am I supposed to do? – Shruthi Sathyanarayana Dec 14 '15 at 09:44
@ShruthiSathyanarayana Join [the chat here](http://chat.stackoverflow.com/rooms/97832/retain-scrollbar-position) and lets troubleshoot your issue :) – Ahs N Dec 14 '15 at 09:51
The code is working. Thanks :). But if I use that code, calender icon is not popping up. – Shruthi Sathyanarayana Dec 15 '15 at 05:14
2

That's a different issue, you should post it as a new question :) – Ahs N Dec 15 '15 at 07:08

score 3 · Answer 2 · answered Dec 14 '15 at 07:08

3

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.

answered Dec 14 '15 at 07:08

T.J. Crowder

1,031,962
187
1,923
1,875

No need to call this function from onClick now? – Shruthi Sathyanarayana Dec 14 '15 at 07:12
@ShruthiSathyanarayana: No, setting the scroll when the user clicks the checkbox won't help, not if you're going to refresh the page at that point. – T.J. Crowder Dec 14 '15 at 07:15
thanks for your reply. I just now tried the above code. But its getting reloaded as soon as my page is open and not when I click the checkbox. – Shruthi Sathyanarayana Dec 14 '15 at 07:20
@ShruthiSathyanarayana: Yes, you'll need to save a value somewhere (`sessionStorage`, probably) or put a flag on the query string, so you know whether to do it. See Ahs N's answer. – T.J. Crowder Dec 14 '15 at 07:21

score 1 · Answer 3 · answered Dec 14 '15 at 07:20

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.

Retain scrollbar position even after reloading using javascript

3 Answers3

Linked

Related