Click here to Skip to main content
13,356,787 members (82,700 online)
Click here to Skip to main content
Add your own
alternative version


7 bookmarked
Posted 10 Apr 2013

jQuery-paged-scroll: Facebook like infinite scroll for you site

, 10 Apr 2013
Rate this:
Please Sign up or sign in to vote.
Smart infinite scroll - easy to use plugin for you web application.


In this article I want to introduce you jQuery-paged-scroll plugin which can easily provide you with Facebook like infinite scroll functionality. The infinite scroll usability pattern is also implemented by many other sites like Twitter and Google Images Search and becomes more and more popular in those days. It saves the user a lot of unneeded clicks and keeps his attention on the results.


However developing the functionality by youself can be tricky and time consuming from the personal experience. jQuery-paged-scroll will do all the work for you will minimal changes in your application and maximum flexibility left to your handler logic. In general plugin only requires from you to say amount of pixels/percents left from the bottom of the window/element where user scrolls and will call your custom handler function with increased page number each time. Such functionality perfectly fits into scenario where you have already implemented you pagination logic with AJAX and numeric links for example but want to switch to infinite scroll approach instead. In the time I wrote the plugin ,there were a couple around.But when looking on them closer I found some limitations which were unacceptable for my project:

  1. Your are required to provide selector to your current pagination and according to href of the links, plugin calculates the page, makes itself AJAX request and updates the container which also need to be specified.
  2. All this assumes you need to generate HTML in your server logic. What if server logic returns JSON which is processed and rendered on client side, you need to change a lot of logic ...
  3. Also if you want to completely switch to infinite scroll, you still required to stay with old pagination in the DOM in order plugin can calculate next page, which looks me a bit awkward...

Using the plugin

Example: Call handleScroll function each time user scrolls reach the position which is : 10px from document bottom. Call the callback until currentPageNumber < yourLogic.totalNumberOfPages. Your logic inserts newly generated html to $('#element') DOM element.

    handleScroll:function (page,container,doneCallback) {
          var html = yourLogic.parseData(data);
    targetElement : $('#element')
    loader:'<div class="loader">Loading next page ...</div>',
    pagesToScroll: yourLogic.totalNumberOfPages

Your have complete documentation and a plenty of examples on: Github.


You can download more examples, minified or development version of the plugin from : Github. Happy scrolling!


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Technical Lead ThomsonReuters
Israel Israel
My name is Dmitry Mogilko and in my professional life I’m entrepreneur,active open source contributor and software engineer currently occupied in Thomson Reuters as Web and UI expert.
I living in sunny Netanya,Israel.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
sachin.vishwa9022-Aug-13 5:43
membersachin.vishwa9022-Aug-13 5:43 
Questionsample code Pin
sachin.vishwa9022-Aug-13 5:42
membersachin.vishwa9022-Aug-13 5:42 
SuggestionAdvice Pin
Kanasz Robert10-Apr-13 4:16
mvpKanasz Robert10-Apr-13 4:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 10 Apr 2013
Article Copyright 2013 by dimaxweb
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid