Javascript/JQuery perform function when user scrolls near bottom of page

Question

On a prominent news site (sry, can't remember exactly which one) I saw a really cool effect... when you scroll near the bottom of the page, a new element slides down from the top of the browser viewport with a lot of social media options (tweet, share on facebook, etc). I'd like to emulate something somewhat similar... in fact, there's really a ton of things I could think of to do if I knew how to trigger a function when the user is near the bottom of the page...

So, my question is very basic: how does one trigger a function when the user has scrolled near the bottom of a dynamically sized page?

score 32 · Answer 1 · answered Apr 10 '11 at 02:06

32

$(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 Apr 10 '11 at 02:06

Hussein

42,480
25
113
143

1

http://stackoverflow.com/questions/3898130/how-to-check-if-a-user-has-scrolled-to-the-bottom – user956584 Jul 06 '12 at 02:31
Beautiful. This is perfect. Just what I needed. – agon024 Sep 15 '15 at 17:18

score 9 · Accepted Answer · answered Apr 10 '11 at 02:09

9

If you have an element thats near the bottom of the page, you can use Waypoints to trigger a function when the user scrolls to that element. Or if you want to use a pixel limit like in Hussein's post, make sure to heed the scroll lessons we learned from twitter

answered Apr 10 '11 at 02:09

Chris Cherry

28,118
6
68
71

It is better to use Waypoints then using Hussein's answer, because Waypoints are cross device compatible while Hussein's answer is working only on PCs. – Airy Mar 03 '14 at 14:42
There is nothing in Hussain's answer that would restrict it to work on PCs. Besides, it would be crazy unproductive to use a library for something that can be done in one line of code. – Muhammad bin Yusrat Jan 30 '18 at 07:37

Javascript/JQuery perform function when user scrolls near bottom of page

2 Answers2

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

Linked