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 already 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’s 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. Just to tell you – I have not used any plugin or library here.

New contents are loaded by calling a C# function when the user scrolls down to the bottom of the page, and this continues until all the contents are loaded.

The contents can be fetched from the Database. For example, if your database has 400 products, you can use jQuery Infinite Scroll 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 I have to find out when the user scrollbar touches the bottom of the page. I can use the Window Scroll Event to check this.

The below jQuery code shows 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');
    }
}); 

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

• 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.

Alternatively, 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

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

The work of the jQuery AJAX method will be to call the server side function that does the database call and fetching of data.

Here in my code I have called the C# function with jQuery AJAX method. 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 download link:

DOWNLOAD

It will be better to call the server side function when the user’s scrollbar is a few inches above the bottom. For this I can update the jQuery Infinite Scroll code like this:

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

The above code alerts when the user’s scroll bar is under 100 pixels from the bottom.

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 with your friends so that they can learn about it.

• 1. jQuery Validation of Email, Number, Checkbox and More.
• 2. How to Make Sticky Ads with jQuery Effortlessly.
• 3. Creating jQuery Expand Collapse Panels In HTML.