window.onload and expected behavior

Question

I have the following code on a page:

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

My expected behavior was that every time the page was displayed it would make the page scroll to 0,0 (top left). But this isn't true, it only does it if I "reload" the page. For example if I go to the page it scrolls to the top, but if I navigate away and come back it does not work. Somehow the onload is not being triggered.

Since I am just learning, I am assuming I am expecting something that is not true. Can some shed some light on this for me?

Possible duplicate of [Is there a cross-browser onload event when clicking the back button?](https://stackoverflow.com/questions/158319/is-there-a-cross-browser-onload-event-when-clicking-the-back-button) — Nickolay, Jan 14 '18 at 22:35
Hi, have you tried `document.onload = function () { setTimeout( function () { window.scrollTo(0, 0); }, 500 ); };` ? **See my anser below...** — Paolo, Jan 16 '18 at 08:58

score 0 · Answer 1 · answered Jan 14 '18 at 22:36

0

window.onload gets called once the browser has finished parsing(aka reading) the html. The browser only needs to parse the html once whenever you load the page, so it only ever gets called once.

If you want it to be called whenever you refocus the tab, you can use the window.onfocus property.

answered Jan 14 '18 at 22:36

EKW

2,059
14
24

OK so that works if I leave the tab open and come back to it (good to know). What I meant by navigate away was go to a different page on the same website inside the same tab. So if I have the original window.onload snippet on my "contact" page, then go to the home page and back, it doesn't trigger (neither does window.onfocus). – Vonedaddy Jan 14 '18 at 22:39
That’s not the desired behavior. The OP is asking for an event triggered on both loading the page and _navigatng to the page by clicking the back button_. – Sebastian Simon Jan 14 '18 at 22:39

Paolo · Answer 2 · 2018-01-15T08:26:45.790

When you go back to a page already visited the browser scrolls the page to the point you were when you left the last time.

A scrollTo invoked at window.onload either is ignored or it is executed before the browser gets into the way and restores the scroll position.

This is intended to give the user a better browsing experience, actually this is what normally a user expects, expecially when navigating back to the page via the "back" button.

But, if you really want to, you can override the browser behaviour by letting some time pass after onload and before your code scrolls the page to (0,0):

window.onload = function () {
    setTimeout( function () {
        window.scrollTo(0, 0);
    }, 500 );
};

This way window.scrollTo is "scheduled" to be executed 0.5 seconds after page is loaded.

...and will succeed.

See also Prevent automatic browser scroll on refresh

Note: since window.onload fires when the entire page has loaded (included images, links, frames...) the event (and subsequent scroll to (0,0) may be excessively delayed or not fired at all (if a resource fails loading).

I suggest to use (or at least try) document.onload that fires when the page has been parsed, the DOM structure is ready and linked resources start loading.

Your code becomes:

document.onload = function () {
    setTimeout( function () {
        window.scrollTo(0, 0);
    }, 500 );
};

Since this triggers very early if you have issues you may raise a little the delay value to 750 or 1000 milliseconds.

For your reference you may find useful: window.onload vs document.onload

This is giving me the desired effect MOST of the time. I suspect an outside script is taking longer than .5 seconds to load. Is there a way to trigger this after a specific item (div, script, etc...) loads? — Vonedaddy, Jan 15 '18 at 03:20

window.onload and expected behavior

2 Answers2