Alert using Jquery when Scroll to end of Page

Question

Is there a way to find out page end using Jquery, so that a simple message can be displayed saying you have reached end of the page.

Answer 1

It might need tweaking to account for browsers, but something like this should do:

$(document).scroll(function()
{
    var $body = $('body');
    if (($body.get(0).scrollHeight - $body.scrollTop) == $body.height())
    {
        // display your message
    }
});

Answer 2

This will work and I tested it in IE 7,8,9 , FF 3.6, Chrome 6 and Opera 10.6

$(window).scroll(function()
{
    if (document.body.scrollHeight - $(this).scrollTop()  <= $(this).height())
    {
        alert('end');
    }
});

Answer 3

How to tell when you're at the bottom of a page:

if (  document.documentElement.clientHeight + 
      $(document).scrollTop() >= document.body.offsetHeight )
{ 
    // Display alert or whatever you want to do when you're 
    //   at the bottom of the page. 
    alert("You're at the bottom of the page.");
}

Of course you want to fire the above whenever the user scrolls:

$(window).scroll(function() {
    if (  document.documentElement.clientHeight + 
          $(document).scrollTop() >= document.body.offsetHeight )
    { 
        // Display alert or whatever you want to do when you're 
        //   at the bottom of the page. 
        alert("You're at the bottom of the page.");
    }
});

Here is a jsFiddle example that fades in a "You're Done! Scroll to Top of Page" link when the user has scrolled to the bottom of the page.

References:

• .scroll()
• .scrollTop()
• offsetHeight
• clientHeight