よく使うコード：無限スクロール
無限スクロールを入れるとユーザビリティは良くなりますよね。
特にモバイルでは、タップよりも上フリックでどんどん下に行くのが直感的ですから。
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閉じタグの前が一般的です。
1 2 3 4 5 6 | //コンテンツ終わり <script src="jquery-1.11.1.min.js"></script> <script src="jquery.infinitescroll.min.js"></script> //その他のjavascript読み込み </body></html> |
基本的には以下の３つのオプションを設定するだけです。
navSelector：次に読み込む要素を囲む要素
nextSelector：次に読むこむ要素自体を囲む要素
itemSelector：表示させたい要素
1 2 3 4 5 6 7 | $(function(){ $('#content').infinitescroll({ navSelector : "nav", // ナビゲーション要素を指定 nextSelector : "nav a", // ナビゲーションの「次へ」の要素を指定 itemSelector : "#content div.post" // コンテンツ要素を指定します。 });}); |
htmlは以下のように書きます。
1 2 3 4 5 6 7 8 | <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)」を紹介してくれています。
「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。
注目してほしいのはブラウザに表示されるURLです。
無限スクロールで下がっていくと、今あなたが見ている記事に対応したURLに自動的に切り替わります。
下方向だけでなく上に戻ればまたそれに対応してURLが変わります。
titleタグももちろん切り替わります。
個別のURLをブラウザのアドレスバーに入れれば、直接そのコンテンツを閲覧できます。
そして、そこから無限スクロールが始まります。
記事に与えられた個別のURLは、そのURLできちんとGoogleにインデックスされています。海外SEO情報ブログ
これはすごいですね。
URLを変えながら無限スクロールを実現しています。
ここまでしなくてもinfinite scrollでもnextSelectorでページごとのURLをGoogleに教えているから十分にSEOとして考慮しているのですけどね。
海外SEO情報ブログでも推奨されている方法です。
