SEO-friendly jQuery Infinite Scroll Plugin - Clever Infinite Scroll

File Size: 36.3 KB
Views Total: 8399
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
SEO-friendly jQuery Infinite Scroll Plugin - Clever Infinite Scroll

Just another small jQuery plugin for implementing infinite scrolling via AJAX requests while automatically changing the page's title & URL for better SEO. 

How to use it:

1. Wrap your content into DIV containers. Note that each webpage loaded via AJAX must have the same structure like this:

<div id="contentsWrapper">
  <div class="content">
    Content goes here

2. Add a pagination link at the bottom of the webpage. When the link approaches to the bottom of the browser, an AJAX request to the next page is triggered.

<a href="article1.html" id="next">next</a>

3. Load the jQuery Clever Infinite Scroll plugin after jQuery JavaScript library.

<script src="//"></script>
<script src="js/jquery.clever-infinite-scroll.js"></script>

4. When you use default selectors, just call the function on the top element and done.


5. Customization options.


  // for custom selectors
  contentsWrapperSelector: '#contentsWrapper',
  contentSelector: '.content',
  nextSelector: '#next',

  // path to the loader GIF
  loadImage: 'ajax-loader.gif',

  // set the offset distance for fetching next page
  offset: windowHeight,

Change logs:


  • Adds clever-infinite-scroll-url-change event


  • Trigger a event when content is loaded


  • Replace pushState with replaceState - so it does not keep the history


  • Add offset option


  • Bugfix. Prevent duplicating nextSelector

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