jQuery Infinite Scrolling & Auto-Paging Plugin - jScroll

File Size: 517 KB
Views Total: 43961
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Infinite Scrolling & Auto-Paging Plugin - jScroll

jScroll is a jQuery plugin that helps to implement Infinite Scrolling effect for your web page. Infinite Scrolling, also known as endless scrolling or Auto Paging, is an useful technology that auto loads content via ajax as you scroll down to the bottom of current page.

See also:

Basic Usage:

1. Include jQuery library and jScroll on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.jscroll.min.js"></script>

2. The Html

<div class="scroll">
[Page 1 Content]
<a href="example-page2.html">next</a> 
</div>

3. Call the plugin with options

$('.infinite-scroll').jscroll({

// Enable debug mode
debug: false,

// When set to true, triggers the loading of the next set of content automatically when the user scrolls to the bottom of the containing element. 
// When set to false, the required next link will trigger the loading of the next set of content when clicked.
autoTrigger: true,

// Set to an integer great than 0 to turn off autoTrigger of paging after the specified number of pages. 
// Requires autoTrigger to be true.
autoTriggerUntil: false,

// The HTML to show at the bottom of the content while loading the next set.
loadingHtml: '<img src="loading.gif" alt="Loading" /> Loading...', 

// A JavaScript function to run after the loadingHtml has been drawn.
loadingFunction: false,

// The distance from the bottom of the scrollable content at which to trigger the loading of the next set of content. 
padding: 20, 

// The selector to use for finding the link which contains the href pointing to the next set of content.
nextSelector: 'a.jscroll-next:last', 

// A convenience selector for loading only part of the content in the response for the next set of content. 
contentSelector: 'li',

// Optionally define a selector for your paging controls so that they will be hidden, 
// instead of just hiding the next page link.
pagingSelector: '',

// Optionally define a callback function to be called after a set of content has been loaded.
callback: false

});

Change logs:

v2.40.0 (2018-04-11)

  • Documentation and dependency updates
  • Bugfix.

v2.3.9 (2017-05-31)

  • Added nextHref as argument of callback

v2.3.7 (2017-01-20)

  • Added nextHref as argument of callback

v2.3.5 (2016-04-08)

  • JS update.

v2.3.4 (2015-05-19)

  • update.

v2.3.2 (2015-05-04)

  • fixed: _setBindings tries to load content when nextHref does not exist.

v2.3.1 (2015-04-13)

  • update.

v2.2.4 (2013-11-29)

  • bugs fix.

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