スクロールダウン
-ボタンをクリックして無限スクロール-
動きを実現する仕組み
Infinite Scroll という無限スクロールを実現するライブラリを使って、スクロールをしてボタンをクリックしたら、新しいHTML が読み込まれて下に表示されるようにする。
※ファイルはサーバーに上げないと、動作確認ができません。デモページから動きをご確認ください
[使用するライブラリ]
* jQuery
* Infinite Scroll(https://infinite-scroll.com/)
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/9-1-8.css"> </head>
- body内に無限スクロールをさせたいコンテンツのHTMLを記載します。
<div class="wrapper"> <ul class="article-list"><!--無限読み込みをさせたい要素を囲う親のクラス名をarticle-listに指定--> <li>内容</li> <li>内容</li> <li>内容</li> </ul> <div class="navigation"><a href="page-2.html">続きを表示</a></div><!--クリックするボタンのクラス名をnavigationに指定--> </div>
- 2をコピーして、2 ページ目以降に読み込みたいHTML をつくります。
その際、HTMLの名前を任意の名前+数字(例:page-2.html、page-3.html)にします。<div class="navigation"><a href="page-2.html">続きを表示</a></div> <!--2ページ目以降はリンク先の数字の部分が自動的に連番が付与されて読み込まれます-->
- body 終了タグ直前に jQuery、Infinite Scroll、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.1.0/jquery.infinitescroll.min.js"></script> <!--自作のJS--> <script src="js/9-1-8.js"></script> </body>
自作のCSS内の書き方
/*ローディングが表示されるエリアの設定*/
#infscr-loading {
width:100%;
text-align:center;
margin:20px auto;
}
#infscr-loading img{
width:30px;/*ローディング画像のサイズ*/
}
自作のJS内の書き方
//無限読み込みInfiniteScroll
$('.article-list').infinitescroll({ //無限読み込みをさせたい要素を囲う親のクラス名を指定
navSelector : ".navigation",//次のページを読み込むリンクを囲んでいるクラス名を指定
nextSelector : ".navigation a",//次のページにリンクする要素を指定
itemSelector : ".article-list li",//無限スクロールで表示をさせたい要素を指定
maxPage : 3,//読み込む全体のページ数。入れないと連番でURLが読まれて404エラーが出る
animate: true, //アニメーション処理を行う
loading: {
finishedMsg: "全ての記事が読み込まれました", //全ての要素が読み込まれた後の終了メッセージ
msgText: "読み込み中", //ローディング中の表示テキスト
img: 'svg/loading.svg', //ローディング中の画像を指定
},
},
function(newArticle) {
$(newArticle).hide().delay(100).fadeIn(900); // 0.9秒かけてフェードイン
$(".navigation").appendTo(".wrapper").css("display","block"); //navigationをwrapperの一番最後に移動して表示
});
//ボタンをクリックしたら表示する設定
$('.article-list').infinitescroll('unbind');//初期値にもどして
// ボタンをクリックしたら要素を表示。ボタンのリンク機能は無効
$(".navigation a").click(function(){
$('.article-list').infinitescroll('retrieve');
return false;
});
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!