Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you detect when you're near the bottom of the screen with jQuery? [duplicate]

I was reading the Harvard Business Review (HBR) blog post , The Traits of Advanced Leaders (2011-02-22). They do this on The New York Times (NYT) too. How do you detect when your reader has scrolled all the way to the bottom?

On HBR, when you scroll the near the bottom, they offer you another article to read.

like image 217
chrisjlee Avatar asked Feb 23 '11 02:02

chrisjlee


3 Answers

While the other answer will show you when you are at the bottom, to answer your question about how to tell when you're NEAR the bottom, I've used this before:

if  ( ($(document).height() - $(window).height()) - $(window).scrollTop() < 1000 ){
    //do stuff
}

You can change the value "1000" to whatever you want, to trigger your script when you are that many pixels away from the bottom.

like image 192
Jeff Avatar answered Oct 21 '22 07:10

Jeff


$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height()-$(window).height()){
        alert("We're at the bottom of the page!!");
    }
});
like image 15
DrStrangeLove Avatar answered Oct 21 '22 08:10

DrStrangeLove


$(window).scroll(function () {
   if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
      alert('end of page');
   }
});

-10 indicates how far away from end of page user must be before function executes. This gives you the flexibility to adjust the behavior as needed.

Check working example at http://jsfiddle.net/wQfMx/

like image 5
Hussein Avatar answered Oct 21 '22 08:10

Hussein