jQuery Plugin for Infinite Scrolling / Auto Paging - jmscroll

jmscroll is a simple jQuery infinite scroll plugin which observes the scroll event and loads the next set of content If available. It is a variation of Philip Klauzinski's jscroll Plugin.

Basic Usage:

1. Include the needed jQuery & jQuery Mobile in the document.

<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

2. Include the jQuery jmscroll plugin after jQuery library.

<script src="jmscroll.min.js"></script>

3. Add a link at the bottom of your content to loading more content by clicking.

<a class="next" href="example.html">Load More</a>

4. You can also create a sticky footer that is always visible as you continuously scroll down the page.

<div class="footer">
...
</div>

5. Call the plugin on your content wrapper and done.

$('.content').jmscroll({

// auto loading while scrolling to the bottom of the page
autoTrigger: true,

// After the defined number of pages -which will be triggered automatically
// A button click will trigger the loading of next pages. 
// This is the one of the two ways you have to reach document's footer
autoTriggerUntil:false,

// limit which defines the maximum page number (auto or manually triggered)
totalPages:10,

// For testing purposes
loadingContentDelay:1000,

// progress bar speed
progressBarSpeed:10,

// selector for loading only part of the response
contentSelector: '.item, a.next',

// selector to find the link which contains the href pointing to the next set of content
nextSelector:'a.next:last',

// sticky footer
footerSelector:'.footer',
footerPadding:0,

// callback event
callback:false

// bar | html | spinner
progressType:'bar', 

// Parameters For html Animation
loadingHtml:'Loading More',

// Parameters For js Animation
progressBarSpeed:10,

// Parameters For spinner Animation
spinnerLines:13, //Lines To Draw
spinnerLength:10, //Length Of Each Line
spinnerWidth:10, //Line Thickness
spinnerRadius:20, //Radius Of The Inner Circle
spinnerCorners:1, //Corner Roundness (0..1)
spinnerRotate:0, //The Rotation Offset
spinnerDirection:1, //1: clockwise, -1: counterclockwise
spinnerColor:'#000', // #rgb or #rrggbb
spinnerSpeed:1, //Rounds Per Second
spinnerTrail:60, // Afterglow Percentage
spinnerShadow:false, //Whether To Render A Shadow Or Not
spinnerHwaccel:false, //Whether To Use Hardware Acceleration Or Not
spinnerClassName:'spinner', //CSS Class
spinnerZIndex:2e9, //Defaults To 2000000000
spinnerTop:'50%', //Top Position Relative To Parent
spinnerLeft:'50%' //Left Position Relative To Parent

});

Change logs:

2014-12-24

• More Options For The Progress Animation

2014-12-24

• options update.

---

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