9

How do I modify the following code to detect scrolling to the top page instead. 

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        alert(bottom);
    }
};

EDIT:

I am working on IE 10 for Windows Phone 8 BTW

PutraKg
  • 2,226
  • 3
  • 31
  • 60

6 Answers6

22

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 the window element.

Now, as the onscroll event gets fired when an element's scrollbar is being scrolled., the element will be the window 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"

Steve
  • 93
  • 1
  • 9
PutraKg
  • 2,226
  • 3
  • 31
  • 60
5

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.

bfavaretto
  • 71,580
  • 16
  • 111
  • 150
  • Sorry I am not very familiar with javascript. The following does not work `window.onscroll = function(ev) { if ((document.body.scrollTop == 0) { alert("top"); } };` http://jsfiddle.net/4gXN2/17/ – PutraKg May 08 '13 at 05:37
  • You have a syntax (extra parentheses) stopping execution, try this updated version: http://jsfiddle.net/4gXN2/18/ – bfavaretto May 08 '13 at 14:54
0
if (document.body.scrollTop == 0 || document.documentElement.scrollTop == 0) 
{
    alert("top");
}

worked for me

https://www.w3schools.com/jsref/event_onscroll.asp

Phillip M
  • 1
  • 2
0

The best way to do this with only JS is the following example adding an event listener:

var el = document.getElementById('PUT_YOUR_TOP_ELEMENT_ID_HERE');
el.addEventListener('scroll', function(event) {
    if (event.target.scrollTop === 0) {
        alert('Top of page detected');
    }
}, false);
Jonathan Brizio
  • 1,087
  • 1
  • 14
  • 28
0

its really simple: 

$(window).on('scroll', function () {
  let scrollAmount = window.scrollY;
  console.clear()
  console.log(scrollAmount)
});
Mohammad Ghonchesefidi
  • 326
  • 1
  • 5
  • 26
0

The accepted answer gave me an error saying "document is undefined". So here is my solution.

window.onscroll = function(ev) {
    if ((window.innerHeight + window.pageYOffset) == window.innerHeight) {
        alert(top);
    }
};

This checks if the innerHeight + pageYOffset = innerHeight. Which means you can also use:

window.onscroll = function(ev) {
    if (window.pageYOffset == 0) {
        alert(top);
    }
};

Both work for me.

Ed Frees
  • 1
  • 1