Implementing Infinite Scroll with jQuery

Continuous Scroll at page end or Infinite Scroll is one of the best features of modern web design. Many of the leading websites like Twitter, Facebook, Google Image Search, etc. have implemented infinite scroll and many more websites are coming up with this feature. It is really user friendly because it takes lesser bandwidth and provides the control to the user as how much content he or she is willing to view. As you reach the page end, more contents are automatically loaded and you can keep scrolling until you are done. Some people also refer this as lazy load because the content is not loaded until you scroll down and reach at that section.

Do you know how infinite scroll works? Actually, the contents are kept in various pages. Once you reach at the bottom of the page, contents from other page automatically get appended and you feel as if you are viewing the same page. Infinite scrolling transforms the traditional “next page” navigation into a modern AJAX powered continuous scroll.

We have recently introduced this feature to list down the best website designs and you can see infinite scroll live here.

Infinite Scroll in Action

In this article, we will learn how to create infinite scroll easily without using much of jQuery codes. We will be using jQuery Waypoints plugin to implement infinite scrolling. You don’t need to know how to code in jQuery, everything is taken care by this wonderful plugin and it’s really very simple to implement this cool feature with it.

Setting up the pages for infinite scroll

For ease of understanding, we will be creating three simple web pages with similar contents. In the first and second pages, we will have the “next page” navigation link. Once we are done creating the simple pages, we need to add just a few lines of codes and classes.

There are four important CSS classes to be defined for implementing infinite scroll:

  • infinite-container class – Once you scroll down to reach the bottom of the container with “infinite-container” class, waypoint infinite scroll script is fired.
  • infinite-items class – The class of each of the items which will be loaded with AJAX should have the class named as infinite-items. Although you can name it anything else, ‘infinite-item’ is the default and will save you from writing some extra codes.
  • infinite-more-link class – When the waypoint script is fired, it will look for a link with class “infinite-more-link” and fetch the contents from the page defined in href attribute. If the page does not have a link with “infinite-more-link”, script will understand that it has reached the last page and it will be destroyed.
  • infinite-loading class – It will be applied to the “infinite-container” class when the next page is being fetched. You can style the container during AJAX loading to let user know that the content is being loaded.

Let’s move to the HTML part now.

HTML Code for infinite scroll

Here is the HTML code which will be common for all three html pages. See how we have defined the “infinite-container” and “infinite-item” classes. Of course you are free to put anything inside the infinite-item class or define additional classes.

<div class="infinite-container">
 <div class="infinite-item"></div>
 <div class="infinite-item style1"></div>
 <div class="infinite-item style2"></div>
 <div class="infinite-item style3"></div>
 <div class="infinite-item style4"></div>
 </div>

Except for the last page, there will be a link for each of the pages to go to the next page. We just need to ensure here that the class of this hyperlink is defined as “infinite-more-link”.

<a href="default1.htm" id="next_page">Next Page</a>

We also need to include the jQuery, waypoints and infinite-scroll JavaScript files to our HTML page. This can either be done in the head section or after the closing of body tag.

<script src="js/jquery.min.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/waypoints-infinite.js"></script>

Infinite scroll CSS code

The CSS codes necessary for infinite scroll is same for all the pages, you don’t need to define CSS separately. For our example, the styles are defined as follows:

.infinite-container
{
text-align: center;
margin: auto;
max-width: 1000px;
}
.infinite-item
{
border: 5px solid #C977FF;
display: inline-block;
width: 300px;
height: 250px;
background-color: #ECCEFF;
}
.infinite-container.infinite-loading:after
{
content: "Loading...";
height: 30px;
line-height: 30px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background: #CCCCCC;
color: #FFFFFF;
}

Infinite Scroll with jQuery

Well, this is the last part. We just need to include one line of jQuery for getting the infinite scrolling live!

<script type="text/javascript">
$(document).ready(function () {
$('.infinite-container').waypoint('infinite');
});
</script>

That’s all! Your web page is now ready with continuous scroll.

Resources and Files

For downloading the plugins and JavaScript files, you need to visit Waypoints website.

In this tutorial, I have illustrated only the basics for ease of implementing continuous scrolling. However, there are additional parameters and you can customize how it really works. If you wish to learn more and want to see another live example, visit Waypoints infinite scroll page.

Leave a Reply

Your email address will not be published. Required fields are marked *