Save scrolling when refreshing page

Question

On one page of the site it is necessary that when you refresh the page, the user shows that part of the page where he was. Those. if he scrolled down and updated the page, he automatically stayed down. I assume that this is done using localStorage , but I still do not understand exactly how. The information on the Internet could not find, strange.

The page is not just text, but also div , img .. is it not enough important ..

Accepted Answer · 2017-06-01T08:08:13

 let cords = ['scrollX','scrollY']; // Перед закрытием записываем в локалсторадж window.scrollX и window.scrollY как scrollX и scrollY window.addEventListener('unload', e => cords.forEach(cord => localStorage[cord] = window[cord])); // Прокручиваем страницу к scrollX и scrollY из localStorage (либо 0,0 если там еще ничего нет) window.scroll(...cords.map(cord => localStorage[cord]));

Would you at least explain that the code does =) And there are a lot of ES6 that everyone does not know how to work with
Do not forget about legacy and generally there is no need to chase ahead of the tail.

Answer 2 · 2017-06-01T08:16:44

 $(window).scroll(function(){ var s= $(this).scrollTop(); console.log(s ); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div>12</div> <div>12</div><div>12</div><div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div> <div>12</div>

You can use scrollTop() to store the scroll position. This value can be saved in localStorage , and then fed to the same function to go to this value on the page. But one thing - for such a transition it is necessary that the entire DOM has already been built and drawn otherwise there will be errors.

Save scrolling when refreshing page

2 answers 2

More articles: