Create Infinte scroll effect using Jquery – With Demo

By /

scroll-7026134

Create Infinte scroll effect using Jquery – With Demo

In Ajax, HTML, jquery, by Steve

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
  • This is my some title and is at number

    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.

.

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

  $(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() { $('').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; } });
  });

All Done!

.

Here is the final DEMO

.

Cheers!!

Scroll to Top