Load more content when user scrolls "near" bottom of page?

Question

I use this to detect scroll to the bottom of page. But how do I detect a distance from the bottom of the page?

if($(window).scrollTop() + $(window).height() == $(document).height() ) {
 .. my ajax here
}

I mean i want the function to execute when he is 100px or 200px from the bottom, and not in the very bottom of page. How would I change this?

Also: is it possible, to instead catch if the scroll is at the last of a specific element (say my big CONTAINER) which shows the loaded content.

Thanks in advance

["Infinite scroll"](http://stackoverflow.com/questions/5059526/infinite-scroll-jquery-plugin) is a feature that has been thoroughly addressed elsewhere. — Blazemonger, Oct 24 '12 at 21:25

Doug · Accepted Answer · 2012-10-24T21:46:53.627

20

var nearToBottom = 100;

if ($(window).scrollTop() + $(window).height() > 
    $(document).height() - nearToBottom) { 
 .. my ajax here 
}

or to scroll to the bottom of .CONTAINER

if ($(window).scrollTop() + $(window).height() >= 
    $('.CONTAINER').offset().top + $('.CONTAINER').height() ) { 
 .. my ajax here 
}

edited Oct 24 '12 at 21:46

answered Oct 24 '12 at 21:26

Doug

1,018
2
9
16

score 5 · Answer 2 · answered May 28 '13 at 13:10

This will help you.

<script>
 $(window).scroll(function () {
    if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
        alert("End Of The Page");
    }
 });
</script>

Go through this link for whole article and details how it works.

load more content when browser scroll to end of page in jquery

Load more content when user scrolls "near" bottom of page?

2 Answers2

Linked