Easy Infinite Scrolling Effect In jQuery - Endless Scroll
File Size: | 11.6 KB |
---|---|
Views Total: | 5000 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.