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

On 02.24.10, In Ajax, How to, jQuery

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!!

Unlike scam 642-504 training programs, our NS0-153 dumps and 156-215.70 practice exam are guaranteed to provide quick success in first try.

Steve

Steve is the Founder and Editor-in-chief of Web Developer Juice. He's web developer with 4 years of experience in CSS, HTML, PHP and javascript. If you’d like to connect with him, point to the contact page and follow him on Twitter: @wdjuice.

Visit Website

Comments

Pedro Assuncao
02.24.10

Cool. Thanks for sharing :)

Brochure Design
02.24.10

well that’s really cool.

design logo
02.24.10

Thanks for the useful tip.

sam
02.24.10

Thanks for this script. I am having a tough time trying to figure out how to format the data to post in the script. I am doing this

getData : function() {
$.post(“fetch.php”, { nav: “2″ }, function(data){
alert(“Data Loaded: ” + data);
});
},

the alert gives the correct response, but it is not the same data that is post in the scrolling div. any suggestions? thanks

Very good article. Quite informative and well written. I enjoyed reading it and it made me think.

Portal Dachowy
02.24.10

I enjoyed reading this article. I will come back soon to read it again.

http://www.zooozu.com/2010-09/tutorials/post-pic-create-infinte-scroll-effect-using-jquery/

This dude just stole your article as well as mine.

Despina
02.24.10

Hello, I recently found your web site in a new directory of personal blogs. I dont know how your site came up, must have been a typo, Your web site looks very good. Also i wanted to take your rss feed but i couldn’t. Don’t know why!!? My best regards, Despina.