load more content when browser scroll to end of page in jquery
Recently I have posted how to make animated scrolling to top, scrolling to bottom or scrolling to a control functionality through jquery.
This article explains how to call a function on window scroll event when scroll bars reached to end of the page, suppose we want to call a javascript function or make a ajax request at the end of the scroll or near about.
Below is the sample code that pop up an message when user reaches end of the page.
Real time example, if we don’t want to implement paging in the table and want to load more data at the run-time when user scroll down page and reaches end of the page.
Steps:
User scroll down the page and reached to end of the page.
Scroll end event fire.
Show loader image and make an ajax request to the server (call handler or WCF Services or Rest Services ).
Get the response and append the data to data container and hide loader image.
This article explains how to call a function on window scroll event when scroll bars reached to end of the page, suppose we want to call a javascript function or make a ajax request at the end of the scroll or near about.
Below is the sample code that pop up an message when user reaches end of the page.
<script>
$(window).scroll(function () {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
alert("End Of The Page");
}
});
</script>
track event when scroll bars reached to end
 |
| Call a function when scroll bars reached to end demo |
Real time example, if we don’t want to implement paging in the table and want to load more data at the run-time when user scroll down page and reaches end of the page.
Steps:
User scroll down the page and reached to end of the page.
Scroll end event fire.
Show loader image and make an ajax request to the server (call handler or WCF Services or Rest Services ).
Get the response and append the data to data container and hide loader image.
<script type="text/javascript">
var sIndex = 11, offSet = 10, isPreviousEventComplete = true, isDataAvailable = true;
$(window).scroll(function () {
if ($(document).height() - 50 <= $(window).scrollTop() + $(window).height()) {
if (isPreviousEventComplete && isDataAvailable) {
isPreviousEventComplete = false;
$(".LoaderImage").css("display", "block");
$.ajax({
type: "GET",
url: 'getMorePosts.ashx?startIndex=' + sIndex + '&offset=' + offSet + '',
success: function (result) {
$(".divContent").append(result);
sIndex = sIndex + offSet;
isPreviousEventComplete = true;
if (result == '') //When data is not available
isDataAvailable = false;
$(".LoaderImage").css("display", "none");
},
error: function (error) {
alert(error);
}
});
}
}
});
</script> |
| load more content when browser scroll to end of page in jquery demo |
