Check if a user has scrolled to the bottom

Use the .scroll() event on window, like this:

$(window).scroll(function() {   if($(window).scrollTop() + $(window).height() == $(document).height()) {       alert("bottom!");   }});

You can test it here, this takes the top scroll of the window, so how much it's scrolled down, adds the height of the visible window and checks if that equals the height of the overall content (document). If you wanted to instead check if the user is near the bottom, it'd look something like this:

$(window).scroll(function() {   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {       alert("near bottom!");   }});

You can test that version here, just adjust that 100 to whatever pixel from the bottom you want to trigger on.

I'm not exactly sure why this has not been posted yet, but as per the documentation from MDN, the simplest way is by using native javascript properties:

element.scrollHeight - element.scrollTop === element.clientHeight

Returns true when you're at the bottom of any scrollable element. So simply using javascript:

element.addEventListener('scroll', function(event){    var element = event.target;    if (element.scrollHeight - element.scrollTop === element.clientHeight)    {        console.log('scrolled');    }});

scrollHeight have wide support in browsers, from ie 8 to be more precise, while clientHeight and scrollTop are both supported by everyone. Even ie 6. This should be cross browser safe.

Nick Craver's answer works fine, spare the issue that the value of $(document).height() varies by browser.

To make it work on all browsers, use this function from James Padolsey:

function getDocHeight() {    var D = document;    return Math.max(        D.body.scrollHeight, D.documentElement.scrollHeight,        D.body.offsetHeight, D.documentElement.offsetHeight,        D.body.clientHeight, D.documentElement.clientHeight    );}

in place of $(document).height(), so that the final code is:

$(window).scroll(function() {       if($(window).scrollTop() + $(window).height() == getDocHeight()) {           alert("bottom!");       }   });