I'm making a pagination system (sort of like Facebook) where the content loads when the user scrolls to the bottom. I imagine the best way to do that is to find when the user is at the bottom of the page and run an Ajax query to load more posts.
The only problem is I don't know how to check if the user has scrolled to the bottom of the page. Any ideas?
I'm using jQuery, so feel free to provide answers that use it.
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!");
}
});