scrollTop always returns 0
This cover both html and body element, cross browser (tested on Chrome/Canary, FF, Edge, IE11)
function getScrollTop() {
alert(Math.max(document.body.scrollTop,document.documentElement.scrollTop));
}Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
Bla <br><br><br><br><br>
<button onclick="getScrollTop();">Click me</button>Depending on the implementation, the element that scrolls the document can be <html> or <body>.
CSSOM View introduces document.scrollingElement (see mailing thread), which returns the appropriate element:
document.scrollingElement.scrollTop;
Alternatively, you can use window.scrollY or window.pageYOffset. They are aliases and return the same value, but the latter has more browser support.
For browsers which don't support any of the above, you can check both of these:
document.documentElement.scrollTop;
document.body.scrollTop;
var scrollTests = document.getElementById('scrollTests');
var tests = [
"document.body.scrollTop",
"document.documentElement.scrollTop",
"document.scrollingElement.scrollTop",
"window.scrollY",
"window.pageYOffset"
];
for(var i=0; i<tests.length; ++i) {
var p = scrollTests.appendChild(document.createElement('p'));
p.appendChild(document.createTextNode(tests[i] + ' = '));
p.appendChild(document.createElement('span')).id = tests[i];
}
window.onscroll = function() {
for(var i=0; i<tests.length; ++i) {
try{ var val = eval(tests[i]); }
catch(err) { val = '[Error]'; }
document.getElementById(tests[i]).innerHTML = val;
}
};#scrollTests {
position: fixed;
top: 0;
}
body:after {
content: '';
display: block;
height: 999999px;
}<div id="scrollTests"></div>