Question

If the following code works (which certainly does)

$( 'html, body' ).animate(
    {
        "scrollTop": "500"
    }, 
    500
);

then why doesn’t the following code work?

$( window ).animate(
    {
        "scrollTop": "500"
    }, 
    500
);

If the following code works

$( window ).scroll( myScrollFunctionHandler );

then why doesn’t the following code work?

$( 'html, body' ).scroll( myScrollFunctionHandler );

Can somebody please make a comprehensive explanation as to why this has to be this way?

Answer 1

window does not have a scrollTop property, which is why your first example doesn’t work. document.body does.

As to your second example, $(window).scroll is the event handler installer for window.onscroll. There is no “body onscroll” event, so obviously an event handler installed on the body (or html) element won’t be invoked, as events do not bubble down the DOM, but only up.