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

Answer 1

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.

Answer 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;

}

Answer 3

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

Answer 4

This is how i have solved this issue

function scrollWin() {
    var scrolledTo = localStorage.getItem('scrolledTo');
    $('html, body').animate({ scrollTop: scrolledTo }, 50);
}

$(document).ready(function () {
    scrollWin();
});

$(window).scroll(function (event) {
    var scrolledTo = $(window).scrollTop();
    localStorage.setItem('scrolledTo', scrolledTo);
});