Force page scroll position to top at page refresh in HTML

Question

I am building a website which I am publishing with divs. When I refresh the page after it was scrolled to position X, then the page is loaded with the scroll position as X.

How can I force the page to be scrolled to the top on page refresh?

What I can think of is of some JS or jQuery run as onLoad() function of the page to SET the pages scroll to top. But I don't know how I could do that.
A better option would be if there is some property or something to have the page loaded with its scroll position as default (i.e. at the top) which will be kind of like page load, instead of page refresh.

Surprisingly, none of the solutions here worked for me, but this one did: http://stackoverflow.com/a/11486546/470749 — Ryan, Feb 21 '17 at 16:17

ProfNandaa · Answer 1 · 2021-07-16T05:20:16.833

228

For a simple plain JavaScript implementation:

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}

edited Jul 16 '21 at 05:20

answered Nov 10 '14 at 06:12

ProfNandaa

2,977
2
15
18

@Paul12_ - I just tested it on `Safari 11.0.3` and works okay for me, which one are you using? – ProfNandaa Aug 21 '18 at 23:56
This did not work for me. I had to return from the onbeforeload function to make it work. – Iqbal Apr 19 '19 at 19:39
@Iqbal -- what did you `return`? – ProfNandaa Apr 22 '19 at 09:00
This throws the following error in Chrome: Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': parameter 1 ('options') is not an object. – OG Sean Jun 07 '19 at 17:54
@OGSean - could I have a look at the exact excerpt of the code you wrote? You can give me [pastebin](http://pastebin.com) link. – ProfNandaa Jun 09 '19 at 19:25
1

adding `document.querySelector('html').style.scrollBehavior = '';` may be necessary too. If it was set to `smooth`, it might not get to the top before the page reloads. – kevnk Oct 17 '19 at 20:51

score 188 · Accepted Answer · answered Sep 08 '10 at 03:15

188

You can do it using the scrollTop method on DOM ready:

$(document).ready(function(){
    $(this).scrollTop(0);
});

answered Sep 08 '10 at 03:15

Pat

24,658
6
71
67

10

Does not work on Safari. But this -> http://stackoverflow.com/a/18633915/102133 does. – Ben Apr 26 '14 at 15:02

score 39 · Answer 3 · edited Apr 29 '14 at 06:22

39

The answer here does not works for safari, document.ready is often fired too early.

Ought to use the beforeunload event which prevent you form doing some setTimeout

$(window).on('beforeunload', function(){
  $(window).scrollTop(0);
});

edited Apr 29 '14 at 06:22

tokyovariable

1,628
15
23

answered Apr 26 '14 at 15:05

Ben

4,708
5
48
86

1

Add after scroll function : $('html').text(''); ,so stroller will be reset – user956584 Jun 11 '14 at 15:19
1

@Userpassword Don't you think $("html").remove() would be better ? – Ben Jun 11 '14 at 20:38

score 27 · Answer 4 · edited Nov 02 '19 at 21:29

27

Again, best answer is:

window.onbeforeunload = function () {
    window.scrollTo(0,0);
};

(thats for non-jQuery, look up if you are searching for the JQ method)

EDIT: a little mistake its "onbeforunload" :) Chrome and others browsers "remember" the last scroll position befor unloading, so if you set the value to 0,0 just before the unload of your page they will remember 0,0 and won't scroll back to where the scrollbar was :)

edited Nov 02 '19 at 21:29

David

3,255
1
33
53

answered Sep 07 '16 at 12:42

xoxel

1,467
2
17
28

@Paul12_ Safari requires `document.documentElement.scrollTop` to work. I typically use both though. – Graham John Oct 10 '18 at 13:59

score 19 · Answer 5 · edited Apr 02 '20 at 15:38

19

To reset window scroll back to top, $(window).scrollTop(0) in the beforeunload event does the tricks, however, I tested in Chrome 80 it will go back to the old location after the reload.

To prevent that, set the history.scrollRestoration to "manual".

//Reset scroll top

history.scrollRestoration = "manual";

$(window).on('beforeunload', function(){
      $(window).scrollTop(0);
});

edited Apr 02 '20 at 15:38

Julio Betta

2,155
1
26
24

answered Apr 02 '20 at 14:40

Alex Having Fun

330
2
5

This is the best response for me, works on Chrome/Linux – SNS - Web et Informatique Jun 24 '20 at 07:07
This was great. In multi-page case, just added the two lines `history.scrollRestoration = "manual";` and `$(window).scrollTop(0);` to the js function right after I make the second page visible. – nightrain Apr 22 '21 at 19:02

score 10 · Answer 6 · answered May 29 '13 at 04:53

10

You can also try

$(document).ready(function(){
    $(window).scrollTop(0);
});

If you want to scroll at x position than you can change the value of 0 to x.

answered May 29 '13 at 04:53

Ankit

690
6
14

score 10 · Answer 7 · answered Sep 08 '10 at 03:15

10

Check the jQuery .scrollTop() function here

It would look something like

$(document).load().scrollTop(0);

answered Sep 08 '10 at 03:15

jon3laze

3,118
6
33
66

score 8 · Answer 8 · answered Apr 26 '21 at 14:26

8

The JS history API has the scrollRestoration property, which when set to manual, prevents the last scroll location on the page to be restored:

if (history.scrollRestoration) {
    history.scrollRestoration = 'manual';
} else {
    window.onbeforeunload = function () {
        window.scrollTo(0, 0);
    }
}

answered Apr 26 '21 at 14:26

Pecata

373
3
9

1

This is a great answer, you can even simply use the `history.scrollRestoration = 'manual';` oneliner if you're working on a project where you know the browser will support it. – rebane2001 May 23 '21 at 16:16
Thanks, changing to one liner might make a difference if you are using SSR and window is not available. – Pecata May 26 '21 at 17:52

score 7 · Answer 9 · answered Jan 12 '17 at 16:17

7

Instead of location.reload(), simply use location.href = location.href. It will not scroll to the previous position as location.reload() does.

Note: This will not reload if there is any # in the URL

answered Jan 12 '17 at 16:17

Nauphal

6,118
4
26
43

score 5 · Answer 10 · answered Jan 26 '16 at 22:47

5

<script> location.hash = (location.hash) ? location.hash : " "; </script>

Put the above script in <head> tag of your html. Not sure how single page apps behave! But sure works like charm in regular pages.

answered Jan 26 '16 at 22:47

harshes53

419
1
5
17

score 4 · Answer 11 · answered Jan 12 '17 at 12:12

The answer here(scrolling in $(document).ready) doesn't work if there is a video in the page. In that case the page is scrolled after this event is fired, overriding our work.

Best answer should be:

$(window).on('beforeunload', function(){
    $(window).scrollTop(0);
});

score 3 · Answer 12 · answered Aug 18 '16 at 09:54

$(document).ready(function(){
    $(window).scrollTop(0);
});

did not work for me as google chrome would just scroll back down after the page finished loading. What I used was

$(document).ready(function() {
    var url = window.location.href;
    console.log(url);
    if( url.indexOf('#') < 0 ) {
        window.location.replace(url + "#");
    } else {
        window.location.replace(url);
    }
});

// This loads the page with a # at the end. So it will always load at the top.

score 3 · Answer 13 · answered Dec 09 '20 at 17:20

3

I found that these CSS styles force the page to always scroll to top on reload/refresh:

html {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}

answered Dec 09 '20 at 17:20

centhous

93
1
3

Can confirm that this works. Would love if someone could get an explanation but nevertheless, this should be 2nd highest answer (above all those very, very repetitive `.scrollTop(0)`s), – Tigerrrrr May 24 '22 at 15:55

score 2 · Answer 14 · answered Oct 22 '20 at 16:48

2

This is one of the best way to do so:

<script>
$(window).on('beforeunload', function() {
  $('body').hide();
  $(window).scrollTop(0);
});
</script>

answered Oct 22 '20 at 16:48

Blitz

21
2

score 1 · Answer 15 · answered Dec 23 '20 at 10:05

1

You can use location.replace instead of location.reload:

location.replace(location.href);

This way page will reload with scroll on top.

answered Dec 23 '20 at 10:05

Fernando

803
2
8
21

This seems to work, but I can't find documentation to explain why it works. If anyone has that, please share! – Jake Worth Jul 29 '21 at 15:08

score 0 · Answer 16 · edited Aug 30 '19 at 07:55

0

The supercalifragilisticexpialidocious answer is:

add this at the top of your js file or script tag

document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

document.body.scrollTop = 0; // For Safari

edited Aug 30 '19 at 07:55

Mayur Karmur

1,990
11
32

answered Aug 30 '19 at 07:35

Nicobels

1

Force page scroll position to top at page refresh in HTML

16 Answers16

Linked