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

Question

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.

You can measure the height of the page (and ensure it works for all browsers), measure the scroll location (and ensure it works for all browsers), and measure the height of the viewport (...) to get an idea where the user is looking. Take a look at some "element in view" plugins" like http://remysharp.com/2009/01/26/element-in-view-event-plugin/ as that's exactly what it does. — Yuji 'Tomita' Tomita, Feb 23 '11 at 02:37
How about adding an element near the bottom of the page, and then use the element's onMouseOver, etc? — Rosdi Kasim, Feb 23 '11 at 02:37

score 17 · Answer 1 · answered Feb 24 '11 at 01:22

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.

score 15 · Accepted Answer · edited Apr 19 '13 at 18:03

15

$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height()-$(window).height()){
        alert("We're at the bottom of the page!!");
    }
});

edited Apr 19 '13 at 18:03

Peter Mortensen

30,738
21
105
131

answered Feb 23 '11 at 02:39

DrStrangeLove

11,227
16
59
72

4

Please check http://ejohn.org/blog/learning-from-twitter/. Be careful while catching scroll events on window. – Manish Mar 01 '11 at 08:09
2

"**It's a very, very, bad idea to attach handlers to the window scroll event.** Depending upon the browser the scroll event can fire a lot and putting code in the scroll callback will slow down any attempts to scroll the page (not a good idea)", cf. [Learning from Twitter](http://ejohn.org/blog/learning-from-twitter/) – jensgram Mar 01 '11 at 08:10
@Manish Argh! Well, at least we agree :) – jensgram Mar 01 '11 at 08:10
Why duplicate a selector thrice? And why use jQuery to get information that's just as easily discernible with plain ol' vanilla JS? Using `window.scrollY` and `window.innerHeight` instead of their jQuery counterparts would solve both issues. – tvanc Mar 21 '14 at 23:53
So, I see `window.scrollY` is not totally safe (doesn't work in IE8 or less), but `document.documentElement.scrollTop` is. http://stackoverflow.com/questions/16618785/ie8-alternative-to-window-scrolly – tvanc Mar 21 '14 at 23:58
One thing of note, make sure that you have a doctype and proper html markup specified. I was quickly coding something and couldn't figure out why it didn't work, that was the case. Just leaving it here in the event someone has the same issue – Bren1818 Jun 08 '15 at 19:27

score 5 · Answer 3 · answered Mar 01 '11 at 08:03

5

$(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/

answered Mar 01 '11 at 08:03

Hussein

42,480
25
113
143

The `>=` and `-10` did the trick for me, those silly mistakes, thanks – dippas Oct 31 '18 at 02:21

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

3 Answers3

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