How to : Create Infinite scroll effect using Jquery – With Demo


On my first visit to Dzone , I was wondering about their infinite scrolling system and how it is created. Therefore I went to my colleague , javascript master , and asked him how this can be done? He looked at it and made some map in his mind , took less than 2 hours and came out with this infinite scroll plugin.

.

Take a look at this DEMO

.

Step 1: Prepare HTML using PHP

Place following code inside your HTML file(.php). And repalce values of ‘$i’ as per your requirement.

1
2
3
4
5
6
7
8
9
10
11
12
<ul id="infinite_scroll">
<?php
      for($i=0;$i<10;$i++)
	{
	?>
           <li>
              <a href="">This is my some title and is at number <?php echo $i ?></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>
	<?php
	}
	?>
</ul>

.

Step 2: Copy CSS to style sheet

Simply copy these lines in your CSS file and you can modify it too but carefully.

1
2
3
4
       #infinite_scroll{height:200px;overflow-y:scroll;margin-top:50px;border:1px solid #ccc;padding:10px;}
       #infinite_scroll a{font-weight:bold;}
       #infinite_scroll p{margin-bottom:20px;width:90%}
       .loading{text-align:right;margin-top:-100px}

.

Step 3: Add Jquery and scroll Plugin

Now add following scripts just inside head tag of your html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
	<script type="text/javascript">
		$(document).ready(function(){
 
			$( '#infinite_scroll' ).scrollLoad({
 
				url : 'my_scroll_ajax_file.php', //your ajax file to be loaded when scroll breaks ScrollAfterHeight
 
				getData : function() {
					//you can post some data along with ajax request
				},
 
				start : function() {
					$('<div class="loading"><img src="ajax-loader.gif"/></div>').appendTo(this);
// you can add your effect before loading data
				},
 
				ScrollAfterHeight : 95,			//this is the height in percentage after which ajax stars
 
				onload : function( data ) {
					$(this).append( data );
					$('.loading').remove();
				}, // this event fires on ajax success
 
				continueWhile : function( resp ) {
					if( $(this).children('li').length >= 100 ) { // stops when number of 'li' reaches 100
						return false;
					}
					return true; 
				}
			});
 
		});
 
		</script>

All Done!

.

Here is the final DEMO

.

Cheers!!

Recently Published

»

Importance and actions of cloud computing in e-commerce business

The e-commerce industry is growing in leaps and bounds, and, ...

»

How to remove Options from One Select Box and retain One Option?

One can easily remove  options of a select box from HTML and append ...

»

How to Ensure that Users Do Not Deactivate The Critical WordPress Plugins

It’s no secret that among all the remarkably useful features of ...

»

How to scroll to the top of a webpage using jQuery ?

If you are looking for an extraordinary method of smoothly scrolling ...

»

11 sources to gain perfect knowledge of html5 semantic tags

1. Html5tuts Html5tuts is a site dedicated to HTML5. Feel free to ...

»

How to move an element into another parent element using jQuery?

An important piece to the puzzle when coding with jQuery is that how ...

»

10 optionally Good WordPress Typography Plugins You could Opt For

It is not necessary that the person will follow the standard guide ...

»

8 creative 3d slider wordpress themes to keep your blog active

1. Display Display is a WordPress Theme best used for Portfolio and ...

»

11 quick remote screen sharing apps worth trying

1. Join Me Easy to start, easy to join, easy to manage, join.me takes ...