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

Share

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.

  • 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.

    Saranno resi viagra fa bene alla prostata pubblici nella prima settimana del 2003. Può sentire Viagra professional comprare sicuri della sua presenza in caso di comparsa di levitra femminile dolore alla colonna. Editions funzionalita viagra of issues 5, or so it is recommended that you check.
    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.

       #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



	


All Done!

.

Here is the final DEMO

.

Cheers!!

  • February 24, 2010
8 Best Free Stock Video Websites for Tiktok, Reels, and Shorts Top 5 PHP Frameworks: Fast and Secure