I’ve prepared a small html file to demonstrate the behavior, and tried it in three browsers.
o chrome : this is my usual browser
o opera browser : shows the same strange behavior as chrome
o firefox browser : different behavior, F5 refresh starts with the page back at line 0
The only http content is just a large file from wikimedia.org (it’s the image on their home page).
Run the test by loading the html into the browser and scrolling down any amount. Then do an F5 refresh and observe that the scroll position has eerily been remembered.
If your browser has the F12 developer tools, then in its console window you can see log output from my script. “scrollY” is a Window property, but just to be informative I display it in three ways: as plain scrollY, as this.scrollY, and as window.scrollY. They all appear to be the same (but wait).
In the <body.onload> I invoke function theOnLoad{}, which logs the scrollY’s, calls
scrollTo( 0, 0), andlogs the scrollY’s again. It shows the scrollY’s changing from non-zero before the scrollTo, and then as zeros after. That’s great, except back on the html window the image has not been positioned back to the top.
Function theOnLoad() ends with a call to setTimeout( theTimeout, 5000 ). When that function wakes up after 5 seconds and re-displays the scrollY’s, they are all back to their non-zero value.
If I have to guess, there’s a scope for property scrollY and for function scrollTo() that is separate from the three I logged, and that is not shared between a function invoked by onload and a function invoked asynchronously by setTimeout. The test script does not try to scrollTo() from the asynchronous function, but when I do perform scrollTo( 0, 0 ) from there, it does scroll the window.
Any thoughts?
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Scroll Test</title>
<meta charset="UTF-8">
<script>
function showScrollY() {
return " "
+ `scrollY=${scrollY}, `
+ `this.scrollY=${this.scrollY}, `
+ `window.scrollY=${window.scrollY}` ;
}
function theOnLoad() {
console.log( "* From <body.onload>n"
+ " - Before scrollTo( 0, 0)n"
+ showScrollY() );
scrollTo( 0, 0 );
console.log( " - After scrollTo( 0, 0 )n"
+ showScrollY() );
setTimeout( theTimeout, 5000 );
}
function theTimeout() {
console.log( "* From theTimeout() after 5 secondsn"
+ showScrollY() );
}
</script>
</head>
<body onload="theOnLoad(); ">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0f/Homepage_of_Wikipedia.png"
alt="Homepage of Wikipedia">
</body>
</html>
I did not expect the browser to remember the scroll position across F5 refreshes, and I tried various things that I have described, to see what is happening and to try to make the browser behave as I would have expected and preferred.
test.html:14 * From <body.onload>
- Before scrollTo( 0, 0)
scrollY=928, this.scrollY=928, window.scrollY=928
test.html:18 - After scrollTo( 0, 0 )
scrollY=0, this.scrollY=0, window.scrollY=0
test.html:23 * From theTimeout() after 5 seconds
scrollY=928, this.scrollY=928, window.scrollY=928
John Berenberg is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.