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 contents are loaded by jQuery AJAX method. each time 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.

Related Article – Create jQuery Scroll to Element feature that takes the user to a specific heading of the page.

jQuery Scroll Bottom

To implement this feature, first Ihave to find out when the user scroll touches the bottom. We 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.

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.

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 makes 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 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 Infinite Scroll 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’s 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.