How To Implement jQuery Infinite Scroll Feature For Auto Paging

How To Implement jQuery Infinite Scroll Feature For Auto Paging

The jQuery Infinite Scroll feature has become quite common now days. Different websites including Facebook and Twitter are using it. This feature helps in creating Auto Paging (not link-based paging) in a web page so when a user scrolls down to the bottom, the next page content are automatically loaded. This continues on and on.

This feature is not only fast but also very good for the visitors as they don’t have to click on the page links given at the bottom of the web page.

Implementing jQuery Infinite Scroll

I will show you how easy it is to implement this Infinite Scroll feature in this demo. I have not used any plugin or library here. New content is loaded by jQuery AJAX each time the user scrolls down to the bottom and this continues until all the content is loaded.

The content can be fetched from the Database. For example, if your database has 400 products, you can use jQuery Infinite Scroll feature to fetch 20 new products from the DB each time the user scrolls to the bottom. So here the user has to scrolls 20 times to the bottom in order to view all the 400 products.

jQuery Scroll Bottom

To implement this feature first we have to find out when the user scroll touches the bottom. We can use the Window Scroll Event to check this. The below jQuery code showw an alert when the scroll touches the bottom:

$(window).scroll(function () {
    // End of the document reached?
    if ($(document).height() - $(this).height() == $(this).scrollTop()) {
        alert('Scrolled to Bottom');
    }
}); 

We took the difference of “document height” and “window height”. This difference is equal to “window scrollTop” when the user has scrolled to the bottom.

What is document height, window height and window scrollTop?
  • Document Height: It’s the height of the HTML document.
  • Window Height: It’s the height of browser Viewport.
  • ScrollTop: Returns the vertical scrollbar position for the element.

It is quite understandable that if your web page is having a vertical scrollbar then document height will be larger than window height. If the web page is not having a vertical scroll bar then you will get document height less than window height.

Using jQuery AJAX in jQuery Scroll Bottom Code

We already know how to find when the user has scrolled to the bottom. So at that point we can call the fetch the new data from the database. This fetching of data can be done by applying jQuery AJAX code.

The work of this jQuery AJAX code will be to call the server side function that makes the database call and fetching of data.

Here in my code I have called the C# function with jQuery AJAX function. This C# function fetches the data from the database and then returns it to the calling jQuery AJAX function.

The Updated jQuery Infinite Scroll code will become:

$(window).scroll(function () {
    // End of the document reached?
    if ($(document).height() - $(this).height() == $(this).scrollTop()) {
        $.ajax({
            type: "POST",
            url: "index.aspx/GetData",
            contentType: "application/json; charset=utf-8",
            data: '',
            dataType: "json",
            success: function (msg) {
                if (msg.d) {
                    $(".container").append(msg.d);
                }
            },
            error: function (req, status, error) {
                alert("Error try again");
            }
        });
    }
}); 

The C# Function:

[WebMethod]
public static string GetData()
{
    //Fetch data from database and return data at the end
}

That’s all for the coding part. You can check the demo to see how it works and also download the code from below given links:

DEMO DOWNLOAD

Call Server Function 100 Pixels Before Bottom

It will be better to call the server function when the user scroll bar is a few inches above the bottom. For this we can update the jQuery Scroll Bottom code like this:

if ($(document).height() - $(this).height() - 100 < $(this).scrollTop()) {    
alert('Just 100 pixels above to Bottom');
}

The above code tells when the user scroll bar is under 100 pixels from the bottom.

Conclusion
I hope you like this jQuery Infinite Scroll Tutorial. Use it to create high quality Auto Paging feature in your website. Do share this tutorial for your friends to know about it.

More jQuery Tutorial

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on “WordPress, SEO, jQuery, HTML” and more.