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
  </div>
</div>

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="//code.jquery.com/jquery-2.1.4.min.js"></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.

$('#contentsWrapper').cleverInfiteScroll();

5. Customization options.

$('#contentsWrapper').cleverInfiteScroll({

  // 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:

2017-12-06

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

2017-10-15

• Trigger a event when content is loaded

2017-03-11

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

2015-10-19

• Add offset option

2015-07-16

• 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.