17

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.

3
  • 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 remysharp.com/2009/01/26/element-in-view-event-plugin as that's exactly what it does. Commented Feb 23, 2011 at 2:37
  • How about adding an element near the bottom of the page, and then use the element's onMouseOver, etc? Commented Feb 23, 2011 at 2:37
  • sorry!my mistake! now it's ok!:) Commented Feb 23, 2011 at 4:00

3 Answers 3

17

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.

15
$(window).scroll(function(){
    if ($(window).scrollTop() == $(document).height()-$(window).height()){
        alert("We're at the bottom of the page!!");
    }
});
6
  • 4
    Please check ejohn.org/blog/learning-from-twitter. Be careful while catching scroll events on window.
    – Manish
    Commented Mar 1, 2011 at 8: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
    – jensgram
    Commented Mar 1, 2011 at 8:10
  • @Manish Argh! Well, at least we agree :)
    – jensgram
    Commented Mar 1, 2011 at 8: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
    Commented Mar 21, 2014 at 23:53
  • So, I see window.scrollY is not totally safe (doesn't work in IE8 or less), but document.documentElement.scrollTop is. stackoverflow.com/questions/16618785/…
    – tvanc
    Commented Mar 21, 2014 at 23:58
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/

1
  • The >= and -10 did the trick for me, those silly mistakes, thanks
    – dippas
    Commented Oct 31, 2018 at 2:21

Not the answer you're looking for? Browse other questions tagged or ask your own question.