Load More Content On Scroll Down - Infinite Scroll Pagination

A small yet configurable infinite scroll plugin to replace the traditional pagination that provides a better content load experience simliar to the native mobile app.

The plugin allows the visitor to automatically or manually loads more content from server via AJAX when continuously scrolling the content area to the bottom of the page (or a specific container).

How to use it:

1. Load the Infinite Scroll Pagination plugin after you load the latest version of jQuery library.

<link href="/path/to/css/scrollpagination.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/scrollpagination.js"></script>

2. Define your content in a JSON file from which the plugin fetches and appends more content to the bottom exisitng content when scrolling down the page.

// data.json
{
  "content": {
    "0": "Entry 1",
    "1": "Entry 2",
    "2": "Entry 3",
    "3": "Entry 4",
    "4": "Entry 5",
    // ... more content here
  }
}

3. Create a container to hold your content.

<div id="scrollpagination">
  <ul id="content"></ul>
</div>

4. Create a DIV to hold the loading messages.

<div class="loading" id="loading"></div>

5. Call the function and define the path to the JSON file. That's it.

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    }
  });
});

6. By default, the plugin automatically loads content from the JSON file when scrolling down the webpage. To load more content manually with a load more button, follow these steps:

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    },
    'autoload': false,
    'before': function(){}, // before loading
    'after': function(elementsLoaded){
      $(elementsLoaded).fadeInWithDelay(); // fade in content when loaded
    }
  });
});

7. Determine the container in which you'd like to track of the scroll event. Default: the whole window.

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    },
    'scroller': $("#myContainer")
  });
});

8. Determine the offset to trigger the auto load behavior when scrolling down the page. Default: 20px.

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    },
    'heightOffset': 0
  });
});

9. Customize the loading messages.

$(function(){
  $('#content').scrollPagination({
    'url': 'data.json', 
    'data': {
      'page': 1, // which entry to load on init
      'size': 10, // number of pages
    },
    'loading': '#loading',
    'loadingText': 'Wait a moment... it\'s loading!',
    'loadingNomoreText': 'No more.',
    'manuallyText': 'click to loading more.'
  });
});

---

This awesome jQuery plugin is developed by vancevol. For more Advanced Usages, please check the demo page or visit the official website.