よく使うコード：無限スクロール

Tweet

Pocket

無限スクロールを入れるとユーザビリティは良くなりますよね。
特にモバイルでは、タップよりも上フリックでどんどん下に行くのが直感的ですから。
FacebookやTwitter、Pinterest、Tumblrでも実装されているあれです。

jQueryのinfinite scrollプラグインを使えばあっという間にできてしまいます。

Infinite scroll has been called autopagerize, unpaginate, endless pages. But essentially it is pre-fetching content from a subsequent page and adding it directly to the user’s current page.

jQuery本体はjQuery公式サイトから、infinite scrollプラグインはGitHubの配布ページからダウンロードしてきます。
GitHubではページ右下の「Download Zip」からダウンロードできます。

この２つをWebサイトで読み込みます。
コンテンツの最後、body閉じタグの前が一般的です。

    //コンテンツ終わり
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.infinitescroll.min.js"></script>
    //その他のjavascript読み込み
  </body>
</html>

基本的には以下の３つのオプションを設定するだけです。
navSelector：次に読み込む要素を囲む要素
nextSelector：次に読むこむ要素自体を囲む要素
itemSelector：表示させたい要素

$(function(){
  $('#content').infinitescroll({
    navSelector  : "nav",              // ナビゲーション要素を指定
    nextSelector : "nav a",            // ナビゲーションの「次へ」の要素を指定
    itemSelector : "#content div.post" // コンテンツ要素を指定します。
  });
});

htmlは以下のように書きます。

<div id="content">
  <div class="post">.....</div>
  <div class="post">.....</div>
  <div class="post">.....</div>
</div>
<nav>
  <a href="/posts?page=2">次へ</a>
</nav>

navSelectorオプションで指定した$(‘nav’)は非表示になります。
nextSelectorオプションで指定した$(‘nav a’)のhrefから次ページをAJAXでとってきます。
itemSelectorで指定した$(‘#content div.post’)を次ページからとってきて、$(‘#content’)要素に追加していきます。

簡単ですね。

ところで、海外SEO情報ブログのKenichi Suzukiさんが「世界で最も美しくSEOに適した無限スクロールを実装するサイト、QUARTZ (qz.com)」を紹介してくれています。

これはすごいですね。
URLを変えながら無限スクロールを実現しています。

ここまでしなくてもinfinite scrollでもnextSelectorでページごとのURLをGoogleに教えているから十分にSEOとして考慮しているのですけどね。
海外SEO情報ブログでも推奨されている方法です。

Tweet

Pocket