Scroll to same Position on reload and load

Question

i have a webpage that is full of div's with huge length, so whenever I refresh my page or manual document loading through actions, i need to scroll my window or document to same or previous position, but i want that to be done by browser automatically.
i searched it in web and found no help, but i came to know that solution is there with out any other lib inclusion.

I have a page of height more exceeds window height with some divs and select boxes whenever i select any thing in middle of page, it refresh my page and sends loads new document here i want to move to my previously selected select box placed div so that i can avoid manual scrolling on each selection

any chance you can set up a jsfiddle so we can get an idea of the layout? — JanR, Sep 30 '14 at 04:03
you can see my count i'm new to this stackoverflow and fiddle — gani, Sep 30 '14 at 04:06
http://jsfiddle.net/, it's a site that will allow you to copy some css, html and javascript in. It will help when looking at your problem. Once you hit save, just post the url here. — JanR, Sep 30 '14 at 04:07
http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ in Stackoverflow.. :D — Nagaraj Tantri, Sep 30 '14 at 04:09
just check this page move the first answer to top of page and press f5 button you will get the same position again... that i want — gani, Sep 30 '14 at 04:17

score 2 · Answer 1 · answered Sep 30 '14 at 04:04

From what I understand, the refresh of the page is not automatic and is completely dependent on the user. So, one solution that comes to my mind is use the local storage that's built into the browser and update that storage with your pos variable periodically.

Sample code snippet (taken from documentation directly - pure javascript):

 // Store
 localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

That way you can retrieve the last saved scroll position and do the needful. Jquery also has a local storage API built around this HTML5 webstorage. I've posted the documentation, it should get you started in the right direction.

I hope it helps. If it worked for you ,please mark the answer as accepted so that other users stumbling upon this question can also benefit out of the solution. Better still, update the question with relevant code snippet that worked for you. — Vivek Pradhan, Sep 30 '14 at 04:31

gani · Accepted Answer · 2014-09-30T06:26:46.773

2

first i added position to localStorage

localStorage.setItem("scrollTop", document.body.scrollTop);

then getting same position from it onload(reload)

window.onload = function() {  
var scroll = parseInt(localStorage.getItem("scrollTop"));
//parseInt(localStorage.scrollTop);   
if (!isNaN(scroll))
document.body.scrollTop = scroll;

}

edited Sep 30 '14 at 06:26

answered Sep 30 '14 at 04:32

gani

99
1
10

Why do you cast `document.body.scrollTop` to a `string`, and then cast it back to an `int` again? You can just store `document.body.scrollTop` without any casting, and then when you get it back again you won't need to use `parseInt`. – Michael Bates Sep 30 '14 at 05:41
1

Actually it looks like `localStorage.setItem()` casts `int`s to a `string` (in Chrome anyway). – Michael Bates Sep 30 '14 at 05:45
Along with [this](https://stackoverflow.com/questions/19635188/why-is-body-scrolltop-deprecated) I would not recommend using scrollTop and scrollLeft – James Ashwood Sep 01 '20 at 12:40

score 1 · Answer 3 · answered Sep 01 '20 at 12:37

Getting the scroll position

In JavaScript, we can use the window.scollY & window.scollX object to get the scroll data.

scrollFromTop = document.body.scrollY;

Not Forgetting the position

We need to add the position to a localStorage variable, so that we don't lose the data when the user goes onto a different page

localStorage.setItem("scrollY", window.scrollY);

Getting data from the `localStorage`

To get data from the localStorage, we must use the localStorage.getItem() method, like this.

var data = localStorage.getItem(nameOfItem);

Setting the value on load

On load, get the original position that we have set earlier, and then scroll down to it using window.scroll

window.onload = function() {  
    var scrollY = parseInt(localStorage.getItem("scrollY"));
    if (!isNaN(scroll)) {
        window.scroll(0, scrollY);
    }
}

Full Code

Here is the full JavaScript code for this question:

window.onunload = function() {
    localStorage.setItem("scrollY", window.scrollY);
}

window.onload = function() {  
    var scrollY = parseInt(localStorage.getItem("scrollY"));
    if (!isNaN(scroll)) {
        window.scroll(0, scrollY);
    }
}

Documentation Links

localStorage

scrollX

scrollY