Easy Infinite Scrolling Effect In jQuery - Endless Scroll

A lightweight and easy-to-use jQuery infinite scroll plugin that allows infinite scrolling images and any content html in your content-rich web page/web application.

Features:

• Dynamically appends additional content to the bottom of the page on scroll down.
• Dynamically loads additional content to the beginning of the page on scroll up.

Basic usage:

1. Load the jQuery Endless Scroll plugin's main JavaScript jquery.endless-scroll.js after the latest jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.endless-scroll.js"></script>

2. Activate the infinite scroll on your content list as this:

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  ...
</ul>

$('#list').endlessScroll({
  // options here
});

3. Default configuration options.

$('#list').endlessScroll({

  // the number of pages to keep
  pagesToKeep: null,

  //  the number of pixels from the boundary of the element that triggers the event
  inflowPixels: 50,

  // Only fire once 
  fireOnce: true,

  // Delay in milliseconds
  fireDelay: 150,

  // loading text
  loader: 'Loading...',

  // String or Function
  // e.g. function (fireSequence, pageSequence, scrollDirection)
  content: '',

  // where to put the loader
  insertBefore: null,
  insertAfter: null,

  // the frequency of the scroll event
  intervalFrequency: 250,

  // auto fire when when the content is empty
  ceaseFireOnEmpty: true,

  // resets the fire sequence counter if the function returns true
  resetCounter: function() {
    return false;
  },

  // callback function
  callback: function() {
    return true;
  },

  // stop the event if the function returns true
  ceaseFire: function() {
    return false;
  }

});

---

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