Create a infinite scroll page using jQuery

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to a particular element – a ‘waypoint’. This can be used to highlight when a element comes into view, load additional html or throw a popup. In this post we will use it to create a infinite scroll page.

An infinite scroll page can be useful when you do not want to add pagination, but would rather load the content on the same page when the user requests.

Waypoints requires jQuery, so you need to add that to your page before initializing waypoints.

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

View Demo

The following is how you register an element as a waypoint. When the user scrolls past that element it triggers a waypoint.reached event, which you can then use to run your custom code.

For example if you have a footer element with the following structure, you can attach a function to be executed when that element comes in view.

<footer>
    <div class="container">  
        <p>Footer text</p>
    </div>
</footer>
$(document).ready(function() {
	opts = {
		offset: '100%'
	};
 
        /* Execute the following when the footer comes in view */
	$('footer').waypoint(function(event, direction) {
		alert('You have scrolled to the end of the page.');
 
	}, opts);
});

In the above example we only displayed a alert dialog, but what we instead want is additional data to be appended to the existing content, giving us our infinite page. The following is a example code to create a infinite page by loading additional data from a php server page.

$(document).ready(function() {
	$footer = $('footer'),
	opts = {
		offset: '100%'
	};
 
        /* When the 'footer' element comes in view, 
           the following code is executed */
	$footer.waypoint(function(event, direction) {
		$footer.waypoint('remove');
                /* We get additional data from a php page and 
                   append the same to the end of the page. */
		$.get('more-data.php', function(data) {
			$('#main').append(data);
			$footer.waypoint(opts);
		});
	}, opts);
});

You can find additional options at the waypoints page.

ui


8 thoughts on “Create a infinite scroll page using jQuery

  1. Hi,

    How do you use this script when you have the data in a MySQL DB?

    Instead of “more-data.php” what should you use in this case to get the info from the database?

    Thanks in advanced!

  2. It is relatively easy. Instead of more-data.php it will your php file that retrieves MySQL queries, formats is neatly and echoes it back; the echoed data will be now attached to the main html page using the following call:
    $(‘#main’).append(data);

  3. Hi,
    I’m new to this. Can you provide an example of how the php file is setup/structured in order to get this to work?

    I’m trying to setup infinite scrolling (using waypoints js) in order to load one additional div at a time when you scroll to the bottom of the page.

    I’m hoping to have a file (html or php or whatever) that contains all of the divs to be loaded, but use waypoints to only load one of divs at a time as you scroll down.

  4. Thanks, great example.
    Is it possible to include Django as a link instead of your ‘more-data.php’ link and if so how?
    I.e. The django code will fire off an AJAX request to my database to retrieve more data.

  5. Hi, Thanks for this article.
    I just have a query. In this example, the data is fetched from the database on scrolling. What if I have all of my data loaded already..? I just want to display some limited records at the beginning, and scrolling should display the rest of the records.
    I dont want to fire the query on scroll, i have the data loaded when the page is visited.

    Thanks in advance.

  6. The critical function here is :
    $(‘#main’).append(data);

    Just bypass the jQuery ‘$.get’ function and load your data whenever the waypoint is triggered. I’m assuming you data is stored in an array. Just loop through the same on each waypoint trigger.

Comments are closed.