Take window to same scroll position on reload

Question

I am using the following code to take the window to the same scroll position after a button or drop-down is used. Example of one of the buttons (#english) is given in the code below.

EDITED

f(localStorage.getItem("scroll"))  
    {
        window.scrollTo(0, parseInt(localStorage.getItem("scroll")));

    }



        $("#english").on("click",function()
        {
             localStorage.setItem("scroll", document.body.scrollTop);
        });

window.localStorage.clear();

This works well in Safari, but not in Firefox.

Can't seem to get it to work in Firefox. Anyone, please.

score 4 · Answer 1 · edited May 23 '17 at 12:08

According to this document.body.scrollTop is deprecated in firefox try document.documentElement.scrollTop instead. You may have to insert some conditional logic to use document.body.scrollTop in Safari and document.documentElement.scrollTop in firefox.

Change your click handler to something like

$("#english").on("click",function(){
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    localStorage.setItem("scroll", scrollTop);
});

ALSO

If scroll does not exist in localStorage then

localStorage.clear(); 
typeof localStorage.getItem("scroll"); // "object"

If scroll exists then

localStorage.setItem("scroll", 1000);
typeof localStorage.getItem("scroll"); // "string"

If scroll is 0

localStorage.setItem("scroll", 0);
typeof localStorage.getItem("scroll"); // "string"

thus, unless "scroll" is explicitly set to undefined, typeof localStorage.getItem('scroll') === 'undefined'; will never return true.

If scroll does not exist, its value is null

localStorage.clear(); 
localStorage.getItem("scroll"); // null

AND

null === true //false

so

if(localStorage.getItem("scroll"))  
        {
            window.scrollTo(0, parseInt(localStorage.getItem("scroll")));

        }

will scroll if scroll exists (and is a number of course) and won't if it does not. Are you looking for some other behavior?

if you mean this: if(!localStorage.getItem("scroll")) { window.scrollTo(0, localStorage.getItem("scroll")); } Its not working. — Eddy, Mar 18 '16 at 13:03
Thanks Matt. Sorry for the delayed response, b'n away. Need the page to scroll back to the exact same scroll position as when a button is clicked that loads new page. — Eddy, Mar 23 '16 at 12:47
Edited the code in my question to your answer. Its work in Safari but not in Firefox (on a Mac) — Eddy, Mar 23 '16 at 12:49

score 0 · Accepted Answer · answered Mar 25 '16 at 08:57

This works:

<script>

/*makes a new page jump to same scroll position as the scroll position when the link is activated*/ 

if(localStorage.getItem('scroll'))  
        {
            window.scrollTo(0, parseInt(localStorage.getItem("scroll")));

        }

$("#englishflag").on("click",function()
{
     localStorage.setItem("scroll", window.pageYOffset);
});


 window.localStorage.clear();

  /*END*/ 
</script>

Take window to same scroll position on reload

2 Answers2