Creating Infinite Scrolling Pages With jQuery - frevr.js

frevr.js is a lightweight, simple-to-use jQuery infinite scrolling plugin that loads more pages using ajax requests and appends the result in the current page as you scroll down the bottom of the screen.

How to use it:

1. Download the plugin and load the frevr.js plugin after you've loaded the latest version of jQuery library.

<script src="jquery.min.js"></script>
<script src="frevr.jquery.js"></script>

2. Create anchor links pointing to the prev/next pages at the bottom of the webpage.

<a id="prev-page" href="page-1.html">Page 1</a>
<a id="next-page" href="page-2.html">Page 2</a>

3. Create your own content to be loaded via AJAX as you scroll down the webpage:

<div id="container">
  Content here
</div>

4. Activate the infinite scrolling:

$.frevr({
  next: '#next-page',
  posts: '#container'
});

5. Specify the amount of pixels from the bottom of the webpage to start loading the next page:

$.frevr({
  trigger : 150
});

6. Initialize the plugin and done.

$.frevr.init();

7. Callback functions available.

$.frevr.init({
  
  before : function(){
    // ...
  },
  after : function(){
    // ...
  }

});

---

This awesome jQuery plugin is developed by pachanka. For more Advanced Usages, please check the demo page or visit the official website.