Vanilla JavaScript: Scroll to Top of Page

Question

I may have missed something, but I cannot get window.scrollTo(0,0) to move to the top of the page.

I am implementing a sticky aside which works well enough. It uses .getBoundingClientRect() to get the initial position.

However, if the page is partly scrolled, and I refresh the page, it reads the position wrongly, and is positioned in the wrong place.

I though I would fix this by executing window.scrollTo(0,0) at the beginning, so that the page is at the top, and the aside is in the right position.

When I run the code, window.scrollTo(0,0) doesn’t seem to make any difference.

What is the correct way to get the reloaded window to start at the top?

I have tested it on Firefox on the Mac. Chrome and Safari gives a similar behaviour.

Please, no jQuery.

Answer 1

Have you tried waiting for page load before scrollTo? Try using window.onload

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

Answer 2

Going to top of the page with a scroll effect is a bit more easier in javascript now with:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

CAUTION

I just checked the mozilla doc right now while updating my answer and I believe it has been updated. Right now the method is window.scroll(x-coord, y-coord) and does not mention or show examples that use the object parameter where you can set the behavior to smooth. I just tried the code and it still works in chrome and firefox and the object parameter is still in the spec.

Or in Vanilla you can use window.onload event with scrollTo(x,y) function

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