How to let the chrome forget the page scroll position?

Question

For instance, I open a web page, and scroll down to some position,

then I refresh the chrome browser, the browser could scroll the previous position again

How can I use javascript or css to let the browser to forget the scroll?

I have try $(window).scrollTop(0), but it doesn't work

scrollTop-ing late enough is the only thing I can think of. Say, 50ms after the page load. It seems hacky though. — John Dvorak, Mar 12 '13 at 07:51
@Jan it is hacky, on the other hand the whole theme is a bit hacky. — Linus Caldwell, Mar 12 '13 at 07:52
you might need to put it in the documents onready, in which case it should work — rtpg, Mar 12 '13 at 08:19
Possible duplicate of [Disable brower's auto scroll after a page refresh?](https://stackoverflow.com/questions/18617367/disable-browers-auto-scroll-after-a-page-refresh) — Josh Lee, Aug 18 '17 at 14:01

score 30 · Answer 1 · answered Aug 18 '17 at 13:49

30

It is resolved in the question below.

Disable brower's auto scroll after a page refresh?

// bypass auto scrolling.
if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

answered Aug 18 '17 at 13:49

Brian Zhang

421
4
4

This works, but required some extra tweaking for me. – nbrustein Dec 05 '18 at 12:10
1

this is so simple and it took 2 days to find out about scrollRestoration... thank you! – steven87vt Jul 13 '19 at 14:39
Works great! And all the major browsers now support it https://caniuse.com/?search=scrollRestoration – Gavin Aug 25 '22 at 13:00
this is the only correct solution, as the other ones will actually FORCE the browser to autoscroll to the position 0 after window is refreshed. and you might not want to do this, but instead scroll to your own computed position – user151496 Jan 12 '23 at 14:01

score 3 · Accepted Answer · answered Mar 12 '13 at 07:50

3

A simple way that I can say is to run this code on page load:

document.location = "#";

OR

window.scrollTo(0);

It set the browser viewport to the top of the page, again.

answered Mar 12 '13 at 07:50

Afshin Mehrabani

33,262
29
136
201

4

If I remember correctly, do `window.scrollTo(0)` on page load, and Chrome overrides your scroll. – John Dvorak Mar 12 '13 at 07:53
2

I meant even `window.onload` is too soon for `window.scrollTo`. Several miliseconds after `window.onload` should do, however. – John Dvorak Mar 12 '13 at 07:57
If I want the page scroll to left, not the top, what should I do? – hh54188 Mar 12 '13 at 13:44
3

Seconding @JanDvorak's findings. A `setTimeout` within window.onload works, but by then the window has already scrolled. – ericsoco Jun 04 '14 at 23:08
`window.scrollTo(0)` throws "cannot convert to dictionary" in Chrome and Firefox. Seems that you need to specify x and y like so: `window.scrollTo(0, 0)` – joe Apr 10 '21 at 05:18

score 2 · Answer 3 · answered Jan 16 '14 at 21:54

2

Here is a clean way of getting this done.

window.addEventListener('unload', function(e){
   document.body.style.display = 'none';
});

By simply setting the body display to 'none' you don't have to worry about a flash of the browser scrolling to the top of the page before it is unloaded and the scroll position will automatically be reset to 0.

answered Jan 16 '14 at 21:54

Walex

79
7

3

`body` hidden is not work; change to `window.scrollTo(0, 0);` it will done. – lemon郑 Jul 14 '14 at 02:31

score 0 · Answer 4 · answered Mar 04 '21 at 16:12

0

This worked for me :

JS Way:

window.addEventListener('unload', function(e){
window.scrollTo(0, 0)
});

Jquery way:

$(window).load(function() {
 $(window).scrollTop(0);
});

answered Mar 04 '21 at 16:12

Harsha Vardhan Chakka

1,357
1
9
7

How to let the chrome forget the page scroll position?

4 Answers4

Linked