reloading a web page and placing page at same place where user was at

Is there a way in react or javascript to after reloading a page make that page to be at the same place where the user was looking at? So far, location.reload reloads the page but places that page at its beginning.

3 Answers
3

Add additional true parameter to force reload.

document.location.reload(true)


document.location.reload() stores the position,

document.location.reload()

ordinary reload tries to restore the scroll position after reloading the page, while in forced mode (when parameter is set to true) the new DOM gets loaded with scrollTop == 0.

Reference : https://developer.mozilla.org/en-US/docs/Web/API/Location/reload

My web page is defined by react components and the html page has only

with an id tag. It seems this method does not work under these circumstances.
– Jose Cabrera Zuniga
Jun 30 at 13:38

You can add a scroll listener, and on scroll, save the current position scrolled in sessionStorage. Then, on pageload, check to see if the sessionStorage item is populated, and if it is, set the current scroll position to the number saved in sessionStorage:

scroll

sessionStorage

sessionStorage

sessionStorage

if (sessionStorage.scroll) document.documentElement.scrollTop = sessionStorage.scroll;

window.addEventListener('scroll', () => {
sessionStorage.scroll = document.documentElement.scrollTop;
});


https://jsfiddle.net/1rg37zfd/

(Cannot embed into stack snippet because it doesn't support sessionStorage)

sessionStorage

Does this work? I thought the API was setItem and getItem
– Jay Harris
Jun 30 at 5:01

setItem

getItem

Dot notation works just fine and is more terse, so I prefer it. Check the fiddle - it works
– CertainPerformance
Jun 30 at 5:04

Cool, I guess it works bc I'm getting access denied for jsfiddle
– Jay Harris
Jun 30 at 5:15

You can use localStorage to set a value. then in your init() check for where the user was last seen. The nextBtn, in the function for that, that is where we increment the page number and save it. i usually use a very minimized sync function to handle any refreshing i may want to do.

HTML:




JavaScript:

(function () {
"use strict";
var myUI, userData, myPages;

myPages = [
"Home","Page 2","Page 3","Page 4","Page 5"//when the user's page number is summoned with this object, pages will reflect when the syncFunc is ran
];

userData = 0;//out item where we save the users page number

myUI = {
init: () => {
var uData = localStorage.getItem("userData");//we look to see what is the value

if (!uData || uData === null) {
localStorage.setItem("userData", 0);//this only sets the user's page to 0 on first load or if anything goes wrong
}

var pageHolder = document.createElement("h3"),
nextBtn = document.createElement("button");

nextBtn.innerHTML = " > ";
nextBtn.onclick = myUI.nextPage(userData, pageHolder);

pageHolder.innerHTML = myPages[uData];

myPage.appendChild(pageHolder);

myPage.appendChild(nextBtn);

myUI.syncPage(uData, pageHolder, nextBtn);
},
syncPage: (uData, pageHolder) => {//i mean, you could do a whole window reload and it still work, but why do that when you can just sync things on the fly

pageHolder.innerHTML = myPages[uData];
//alert(uData);
},
nextPage: (userData, pageHolder) => {
return () => {

var uData = localStorage.getItem("userData"),//checking for the data when the user hits a button.
newPage;
if (uData >= 4) { newPage = +uData - 4 } else { newPage = +uData + 1; }//iterate by 1 unless we reach our limit

localStorage.setItem("userData", newPage);//save it

uData = localStorage.getItem("userData");//force our script to recognize the newly saved value
setTimeout(() => {//timeout for dramatic effect if desired
myUI.syncPage(uData, pageHolder);//run a function to sync

}, 100);

}
}

};
window.onload = () => {
myUI.init();//initialize
};
})();


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.