[JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll

サイト構築 -JavaScript

Post on:2012年7月24日

Infinite Scrollのデモ

デモはテキストだけのページです。

デモページ

スクロールしたページ下部にある「more」ボタンを押すと、ページ遷移することなく次のページが読み込まれ、無限スクロール状態になります。

ページ下部の「more」をクリック

Infinite Scroll -jQueryのプラグイン

Infinite Scroll -jQueryのプラグイン

Infinite Scrollの使い方

Infinite Scrollの実装は簡単です。
まずは、外部ファイルをセットします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://www.infinite-scroll.com/wp-content/plugins/infinite-scroll/jquery.infinitescroll.js"></script>

スクリプトでロードするアイテムを囲むエレメントをjQueryのセレクタ（#content）で指定します。

<script>
$(function(){
  $('#content').infinitescroll({
 
    navSelector  : "div.navigation",            
                   // selector for the paged navigation (it will be hidden)
    nextSelector : "div.navigation a:first",    
                   // selector for the NEXT link (to page 2)
    itemSelector : "#content div.post"          
                   // selector for all items you'll retrieve
  }); 
});
</script>

ここで使用している3つのオプションは最小の構成です。