This is the archived documentation site for Infinite Scroll v3. For the latest version, view infinite-scroll.com.

Full page demo

1a - Infinite Scroll full page demo

Hi! This demo will show off several key features of Infinite Scroll.

  • Full page scrolling
  • Changing browser URL and history. Watch how the URL changes as you scroll. Try refreshing on a changed page.
  • Embeds like CodePens and Tweets have their <script>s loaded and embeds rendered

The code looks like this:

<div class="article-feed">
  <!-- .articles will be added to .article-feed -->
  <article class="article">...</article>
  <article class="article">...</article>
  ...
</div>

<!-- status elements -->
<div class="scroller-status">
  <div class="infinite-scroll-request loader-ellips">
    ...
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

<!-- pagination has path -->
<p class="pagination">
  <a class="pagination__next" href="page2.html">Next page</a>
</p>
// init Infinite Scroll
$('.article-feed').infiniteScroll({
  path: '.pagination__next',
  append: '.article',
  status: '.scroller-status',
  hideNav: '.pagination',
});

End of content

No more pages to load

Next page