Subscribe by Email

Pagination with numbers is, in many ways, counter intuitive and time consuming for the user. They have to stop, click on a number, wait for the page to load, and then continue their search. Some websites such as facebook have opted out of this notion of pagination for a system which loads content automatically as the user scrolls. In this tutorial that is what we’re going to be making.

How it works

I’ve created a little plugin that allows us to accomplish our goal. Simply put the plugin checks if the user is at the bottom of the container you specify and loads more content accordingly. Then this data is sent to an ajax file which processes what posts to show.

// Check the user is at the bottom of the element
if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
// Now we are working, so busy is true
busy = true;
// Tell the user we're loading posts
$this.find('.loading-bar').html('Loading Posts');
// Run the function to fetch the data inside a delay
// This is useful if you have content in a footer you
// want the user to see.
setTimeout(function() {
// This is the Ajax function
getData();
}, $settings.delay);
}

The key line here is if($(window).scrollTop() + $(window).height() > $this.height() ... This is basically saying, if the user scroll position is greater than the height of the element targeted, then more elements should be loaded.

What is Ajax?

Ajax is how we send data to files when an event happens in javascript. For example, when we scroll we want to send some data to another file to figure out what to do. That file is usually a PHP file which will process the data sent, and then you can do something like grab information from a database. So how do we do this with jQuery? Since we’re posting data, we use the $.post function. It looks a little like this:

So in the above example we end the information (thats the bit inside the first set of curly brackets) to the file, file.php. When the information is sent it will return some information in the form of a data variable, and we can then use that data to return information to the user via Javascript.

The ajax file

The ajax file is going to have to be customized to fit your needs. All you have to do is grab some information from the MySQL database of your choice with some PHP. I have created a very basic ajax.php file that grabs information from a wordpress MySQL database and displays the content with the title and link. It looks a little like this, but it will be included with the download files in the download link above.

Using the Plugin

Once you have your ajax file sorted out, its just a case of running the plugin. There are a bunch of variables you can determine, but it’s important that you define the query if you’re using the original ajax.php file listed above.

To run the plugin just upload all the files and create a container in your HTML called #content or whatever you want to call your container. Then run the plugin on that. Easy!

$(document).ready(function() {
$('#content').scrollPagination({
nop : 10, // The number of posts per scroll to be loaded
offset : 0, // Initial offset, begins at 0 in this case
error : 'No More Posts!', // When the user reaches the end this is the message that is
// displayed. You can change this if you want.
delay : 500, // When you scroll down the posts will load after a delayed amount of time.
// This is mainly for usability concerns. You can alter this as you see fit
scroll : true // The main bit, if set to false posts will not load as the user scrolls.
// but will still load if the user clicks.
});
});

In the download you’ll find the files necessary to do everything I’ve shown you. Since I can’t include database details you will have to supply your own which you can edit in the ajax.php file. And that’s it! Have a good day!

Great post, that will be useful to try out. Question for you – similar to this, have you seen or implemented a way to swipe WordPress pages (through the prev / next loop of a custom post type) left / right on mobile devices? It’s not the infinite scroll, it would have to stop on each page to view, but a similar process possibly?

Hi, this is an awesome work. Congratulations. But I’m having a problem. How can you hide the load more button on the last query or just when there’s no more content to display. I hope you can help me. Sorry for my english, I speak spanish.

Hey, Jhonny, this works almost great. But, the load more button should hide right after the last query result. If there’s no more content loading it shouldn’t display anything else. I hope you understand me. It’s important for user expectations.

I am the assistant editor of Appliness digital magazine (appliness.com/download) for web developers. This post would be a great fit for our readers and I wanted to see if we could use in in the Feb. issue? We would include your headshot, link to your website, twitter account, github, etc.

At a first start or load no scrollbar is visible, due to the limited number of text or messages loaded. The only way to load the remaining items is by clicking. After a while the scrollbar is there and then remaining items can be loaded by scrolling. Is there a way to load items till a scrollbar is shown on the page?

I am using scroll in my website. By default it will display all the post. But I want to put search functionality in my website so is it possible to send extra parameters to the ajax.php page so that I can filter data in ajax.php page and display it on front instead of default posts ?

I resolved the previous issue..This is the best script i found on infinite scroll great work..Till now i don’t have problems with this..could you help me out in customizing this script such that for example when we scroll down to the bottom of the page after loading all posts,we have a link for the post when we click it it goes to another page.when we click on browser back button can we load all posts which already loaded and go to the location were the post has clicked?

Doesn’t seem to work in IE9 or IE10? Not totally sure but it seems like some issue with the POST data? When my results should be done it starts pulling in other information, as if the data parameters hadn’t been set. Great plugin though!

Awesome post – got it working no problem so thanks for that. I’m using it on wordpress and have a question about extending the functionality.

Essentially i’ve got a wordpress page with three columns, each column is for a different query – so column a loads posts with tag 1, column 2 loads posts with tag 2 and column 3 loads posts with tag 3.

I’ve got the plugin working for one of the columns, but how can i get it working for the other two columns on the page too – independently of each other.

this source that you made is perfect I’d ever seen.it’s really clear and simplistic. I made mobile version by using this source. the only problem I have is, first loading is little bit slow. and sometimes it doesn’t work. Then, when it is loaded initmessage button show up on the top and disapper. I want to solve two problems. first thing is I want to make first loading faster. second is I want to remove initmessage button. please let me know. I really appreciate it.

Thanks for a great script. By default it will display all the post. But I want to put search functionality in my website so is it possible to send extra parameters to the ajax.php page so that I can filter data in ajax.php page and display it on front instead of default posts ?
Will be VERY thankful for an example.
Thanks in advance

Hi, great script.
I have the same problem with extra parameters filtering in ajax.php
I use GET method to get an item’s ID and then pass it in the query.
But it does not pass into ajax.php in anyway. How can I do this?
I tried putting

$.post(‘ajax.php’+window.location.search, …
in javascript.js but no results.

Could you please give me instructions on how to pass the GET variable to ajax.php (the mysql query)?

However I have a question. How would you setup url parameters with this script? I would like to use multiple queries for different pages throughout a website. I would like to know how you would do that?