Javascript detect browser scroll to the top?
Managed to figure it out. Here's my code:
window.onscroll = function() {
var body = document.body; //IE 'quirks'
var document = document.documentElement; //IE with doctype
document = (document.clientHeight) ? document : body;
if (document.scrollTop == 0) {
alert("top");
}
};
Chek it running:
window.onscroll = function(){
var B = document.body; //IE 'quirks'
var D = document.documentElement; //IE with doctype
D = (D.clientHeight)? D: B;
if (D.scrollTop == 0){
alert("top");
}
};
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
EXPLANATION OF HOW THIS CODE WORKS:
window.onscroll
is the command to assign the onscroll event to thewindow
element.Now, as the
onscroll
event gets fired when an element's scrollbar is being scrolled., the element will be thewindow
itself in this case.Now, the
function
will be called when the event is fired.In the function, we get the "document.body" to as en IE is the way to get it. After this, we get the documentElement, if there is a doctype.
Then, this line, is the one that chooses between the document or the body if the
document.clientHeight
is informed. If it's informed, it will put document on variable document. If not, it will put the body itself. After this, it will check the scrollTop property in order to know if current scroll position is "at the top"
window.scrollY
is not cross-browser according to MDN. On IE<9 you must check document.body.scrollTop
, as no property of window
will give you the current scroll position. Actually, document.body.scrollTop
is what I use most frequently, as in my experience it just works.