Infinte Scroll effect with Jquery - infinitescroll

infinitescroll is a jQuery plugin for creating Infinte Scroll effect for your long web contents. Infinte Scroll is an awesome and powerful effect that applied to many modern websites like pinterest, facebook, twitter and etc. It provides a basic mechanism for triggering more contents to be loaded when the bottom of the page is reached.

How to use it:

1. Include jQuery and infinitescroll.js files before </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/demos/js/scroll.jquery.js"></script>

2. Call the plugin after infinitescroll.js

<script type="text/javascript">
$(document).ready(function(){

$( '#infinite_scroll' ).scrollLoad({

url : 'my_scroll_ajax_file.php',

getData : function() {
//you can post some data along with ajax request
},

start : function() {
$('<div class="loading"><img src="/demos/images/ajax-loader.gif"/></div>').appendTo(this);
},

ScrollAfterHeight : 95,//this is the height in percentage

onload : function( data ) {
$(this).append( data );
$('.loading').remove();
},

continueWhile : function( resp ) {
if( $(this).children('li').length >= 100 ) {
return false;
}
return true;
}
});

});

3. Markup

<ul id="infinite_scroll">
<li><a href="">This is my some title and is at number 0</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 1</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 2</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 3</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 4</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 5</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 6</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 7</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 8</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
<li><a href="">This is my some title and is at number 9</a><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></li>
</ul>

---

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