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

Introduction

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.

• Official project page: jQuery-paged-scroll

Background 

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.

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

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

Download

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