Minimal jQuery Infinite Scrolling Plugin - scroll4ever

If you have a lot of content on your website that you'd like to progressively load when users scroll down to a certain point, then this plugin is created for you.

Scroll4ever is a super tiny jQuery infinite-scrolling plugin that loads more content from other HTML files automatically as the user scrolls down the page. 

It creates the opportunity of sharing much more content with your users (without cluttering the browser window). The goal is to help you rank higher on Google by improving the user experience on your website.

See Also:

• 10 Best Infinite Scroll Plugins In JavaScript

How to use it:

1. Download and load the jquery.scroll4ever.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.scroll4ever.js"></script>

2. Add a link pointing to another HTML page to the bottom of your infinit-scrolling list as follows:

<!-- HTML Page 1 -->
<div id="scope">
  <ul id="items">
    <li class="item">List Item 1-1</li>
    <li class="item">List Item 1-2</li>
    <li class="item">List Item 1-3</li>
    ... more list items here ...
  </ul>
  <a class="next-page-link" href="index-2.html" rel="next">
    Load more stuff!
  </a>
</div>

<!-- HTML Page 2 -->
<div id="scope">
  <ul id="items">
    <li class="item">List Item 2-1</li>
    <li class="item">List Item 2-2</li>
    <li class="item">List Item 2-3</li>
    ... more list items here ...
  </ul>
  <a class="next-page-link" href="index-3.html" rel="next">
    Load more stuff!
  </a>
</div>

3. Initialize the plugin to enable the infinite scroll functionality.

$('#scope').scroll4ever({

  // selector of the trigger link
  trigger:'.next-page-link', 

  // element where next page items are going to be added
  container: '#items', 

  // elements to be added to the page
  selector:'.item', 

  // distance from the bottom of the page to load more data
  distance:100, 

  // debug mode
  debug: true, 

  // callback called when a new page is loading
  start: function(){ 
    $('.next-page-link').html('Loading...'); 
  }, 

  // fired when the page is loaded
  complete: function(){},

});

---

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