description

You can embed the infinite scrolling plugin in multiple containers, in an i-frame, configure offset, loading icon, CSS. You can use it to load images or text content on your web page.

Download the Infinite Scroll for FREE and follow the instruction in the 'How to install' section to configure the script.

Requires jQuery 1.7 or higher.
Browser compatibility: Chrome 33+, IE9+, Firefox 3.6.8+, Opera 12+, Safari 5+

download

To download jQuery Infinite Scroll for FREE you need to login your account.

how to install

Follow these steps to integrate the jQuery Infinite Scroll into your web page:

1) Make sure both .js and .css files are copied in the folder where your web page is or just change the path to these files when placing the code in your web page:
<link href="pjInfiniteScroll.css" rel="stylesheet">
<script src="jquery-1.7.min.js"></script>
<script src="jquery.pjInfiniteScroll.js"></script>


2) Initialize the plugin
<script>
$(function () {
$(".container").pjInfiniteScroll();
});
</script>


3) HTML
<div class="container">
<!-- your data here -->
</div>


offset - type: Number; default value: 20; description: Offset to bottom of the selected element, when scrollbar reach this limit, the load is triggered.

autoLoad - type: Boolean; default value: false; description: If true load content automatic, if false shows up a button.

autoLoadUntil - type: Boolean | Number; default value: false; description: How many pages will be loaded automatic. Set this option to > 0 to activate. Works when autoLoad is set to true.

loadingIcon - type: String; default value: "data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA"; description: loading icon source/path

complete - type: Function; default value: null; description: Callback function fired when loading ends.

url - type: String; default value: "ajax.php"; description: URL address using for loading content.

loadMoreText - type: String; default value: "load more"; description: Text for button triggered the loading.

loadMoreClass - type: String; default value: "pjInfiniteScroll_LoadMore"; description: CSS class selector used also for styling.

loadMoreWrapperClass - type: String; default value: "pjInfiniteScroll_LoadMoreWrapper"; description: CSS class selector used also for styling.

indicatorWrapperClass - type: String; default value: "pjInfiniteScroll_IndicatorWrapper"; description: CSS class selector used also for styling.
20 Comments to "jQuery Infinite Scroll"
  • Kishor Mali

    Kishor Mali

    July 5, 2018 at 13:15 pm

    My requirement is like:
    I already have server-side pagination using php yii2 framework. I need infinite scroll after the current server-side loaded page.
    Ex. Suppose my current page is "index.php?r=site/index&page=3", then the plugin must call to page number 4. But according to your script, the current page always be 0 and it calls to 1.

    Can you provide the "page" option along with others? Currently, I changed the code and it is working. If the same will provide in this plugin then it will be added advantage.

  • Hammad

    Hammad

    June 19, 2018 at 10:32 am

    I'm having difficulties integrating this. Is there any tutorial for help?

  • nik

    nik

    July 15, 2017 at 17:23 pm

    heii...how to change url while loading data??

  • kc gerona

    kc gerona

    May 7, 2015 at 02:47 am

    ty i will try it to my scripts..

  • alexandre silva

    alexandre silva

    May 4, 2015 at 16:20 pm

    nice!!

  • nelu

    nelu

    February 28, 2015 at 11:24 am

    thank you very much,you make very good job,keep go on......

  • david

    david

    February 26, 2015 at 06:22 am

    thanks you

  • sachin

    sachin

    December 9, 2014 at 17:50 pm

    thanks

  • anu

    anu

    December 6, 2014 at 09:12 am

    thnks

  • darshit

    darshit

    October 10, 2014 at 20:16 pm

    great website man

next

Add your comment

Captcha