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
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

.

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

»

9 Social Media and Marketing Tools Recommended for a Business

A business is set up to have a profit by delivering a product or a ...

»

Why hand-coding is always preferable over website builders

There is long debate as to why hand-coding is preferable over website ...

»

8 Reasons Your Site Should be Using Progressive Web Apps

Google has been driving at full speed since 2015 to help developers, ...

»

Tips to Handle Negative Feedback for Your Mobile App

Feedback from users for your mobile app is as essential as its ...

»

Why is Link Building So Important? Read this to understand

Getting a high ranking on search engine results is important to the ...

»

Productivity Tips for Web Developers for Efficient Time Management

The world is full of distractions. Whether you are a work-from-home, ...

»

The Importance of a Good Domain Name

The right domain name can genuinely make or break a business – ...

»

Cloud Strategy of Oracle: Working or Not?

Though Oracle considered cloud strategy as gibberish long before, it ...

»

Some Excellent SEO Tools for Boosting SEO Rankings like Never Before

You could be having a really great-looking website and the niftiest ...