ページネーションは、ページ内のコンテンツを分割する機能です。コンテンツが多いページを分割することで表示速度の向上や読み易いページを実施します。
HTML(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* 無限スクロールの設定 */
.navigation {
display: none;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
<!-- 無線スクロールの定義 -->
<div id="main-container">
<p>※スクロールすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
<p>※サーバーに格納されていないと動作しません。</p>
<!-- 無限スクロール領域 -->
<ol class="article-list">
<li>テキスト-01-01</li><li>テキスト-01-02</li><li>テキスト-01-03</li><li>テキスト-01-04</li><li>テキスト-01-05</li> <!-- 01~05行 -->
<li>テキスト-01-06</li><li>テキスト-01-07</li><li>テキスト-01-08</li><li>テキスト-01-09</li><li>テキスト-01-10</li> <!-- 06~10行 -->
<li>テキスト-01-11</li><li>テキスト-01-12</li><li>テキスト-01-13</li><li>テキスト-01-14</li><li>テキスト-01-15</li> <!-- 11~15行 -->
<li>テキスト-01-16</li><li>テキスト-01-17</li><li>テキスト-01-18</li><li>テキスト-01-19</li><li>テキスト-01-20</li> <!-- 16~20行 -->
<li>テキスト-01-21</li><li>テキスト-01-22</li><li>テキスト-01-23</li><li>テキスト-01-24</li><li>テキスト-01-25</li> <!-- 21~25行 -->
<li>テキスト-01-26</li><li>テキスト-01-27</li><li>テキスト-01-28</li><li>テキスト-01-29</li><li>テキスト-01-30</li> <!-- 26~30行 -->
<li>テキスト-01-31</li><li>テキスト-01-32</li><li>テキスト-01-33</li><li>テキスト-01-34</li><li>テキスト-01-35</li> <!-- 31~35行 -->
<li>テキスト-01-36</li><li>テキスト-01-37</li><li>テキスト-01-38</li><li>テキスト-01-39</li><li>テキスト-01-40</li> <!-- 36~40行 -->
<li>テキスト-01-41</li><li>テキスト-01-42</li><li>テキスト-01-43</li><li>テキスト-01-44</li><li>テキスト-01-45</li> <!-- 41~45行 -->
<li>テキスト-01-46</li><li>テキスト-01-47</li><li>テキスト-01-48</li><li>テキスト-01-49</li><li>テキスト-01-50</li> <!-- 46~50行 -->
</ol>
<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
<div class="navigation"><a href="index-2.html">続きを表示</a></div>
</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- 無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
{
navSelector: ".navigation", // 次ページリンクを囲んでいるクラス
nextSelector: ".navigation a", // 次ページリンクのクラス
itemSelector: ".article-list li", // 無限スクロールする要素
maxPage: 3, // ページ数
dataType: "html",
animate: true,
extraScrollPx: 200,
loading: { // 全て終了時のメッセージ
img: "images/loading.gif",
finishedMsg: "全ての読み込みが終了"
}
},
function(newElements) { // 追加部のフェードインとボタンの移動
$(newElements).hide().delay(100).fadeIn(600);
$(".navigation").appendTo("#main-container").delay(300).fadeIn(600);
}
);
$('#main-container').infinitescroll('unbind'); // ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){ // 要素を表示
$('#main-container').infinitescroll('retrieve');
return false; // ボタンのリンクは無効
});
$('.article-list').hide().delay(100).fadeIn(1000); // コンテンツのフェードイン
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->
</body>
</html>
HTML(index-2.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* 無限スクロールの設定 */
.navigation {
display: none;
}
</style>
</head>
<body>
<div class="container">
<!-- 無線スクロールの定義 -->
<div id="main-container">
<p>※スクロールすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
<p>※サーバーに格納されていないと動作しません。</p>
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
<!-- 無限スクロール領域 -->
<ol class="article-list">
<li>テキスト-02-01</li><li>テキスト-02-02</li><li>テキスト-02-03</li><li>テキスト-02-04</li><li>テキスト-02-05</li> <!-- 01~05行 -->
<li>テキスト-02-06</li><li>テキスト-02-07</li><li>テキスト-02-08</li><li>テキスト-02-09</li><li>テキスト-02-10</li> <!-- 06~10行 -->
<li>テキスト-02-11</li><li>テキスト-02-12</li><li>テキスト-02-13</li><li>テキスト-02-14</li><li>テキスト-02-15</li> <!-- 11~15行 -->
<li>テキスト-02-16</li><li>テキスト-02-17</li><li>テキスト-02-18</li><li>テキスト-02-19</li><li>テキスト-02-20</li> <!-- 16~20行 -->
<li>テキスト-02-21</li><li>テキスト-02-22</li><li>テキスト-02-23</li><li>テキスト-02-24</li><li>テキスト-02-25</li> <!-- 21~25行 -->
<li>テキスト-02-26</li><li>テキスト-02-27</li><li>テキスト-02-28</li><li>テキスト-02-29</li><li>テキスト-02-30</li> <!-- 26~30行 -->
<li>テキスト-02-31</li><li>テキスト-02-32</li><li>テキスト-02-33</li><li>テキスト-02-34</li><li>テキスト-02-35</li> <!-- 31~35行 -->
<li>テキスト-02-36</li><li>テキスト-02-37</li><li>テキスト-02-38</li><li>テキスト-02-39</li><li>テキスト-02-40</li> <!-- 36~40行 -->
<li>テキスト-02-41</li><li>テキスト-02-42</li><li>テキスト-02-43</li><li>テキスト-02-44</li><li>テキスト-02-45</li> <!-- 41~45行 -->
<li>テキスト-02-46</li><li>テキスト-02-47</li><li>テキスト-02-48</li><li>テキスト-02-49</li><li>テキスト-02-50</li> <!-- 46~50行 -->
</ol>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
<div class="navigation"><a href="index-2.html">続きを表示</a></div>
</div>
</div>
<!-- 無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
{
navSelector: ".navigation", // 次ページリンクを囲んでいるクラス
nextSelector: ".navigation a", // 次ページリンクのクラス
itemSelector: ".article-list li", // 無限スクロールする要素
maxPage: 3, // ページ数
dataType: "html",
animate: true,
extraScrollPx: 200,
loading: { // 全て終了時のメッセージ
img: "images/loading.gif",
finishedMsg: "全ての読み込みが終了"
}
},
function(newElements) { // 追加部のフェードインとボタンの移動
$(newElements).hide().delay(100).fadeIn(600);
$(".navigation").appendTo("#main-container").delay(300).fadeIn(600);
}
);
$('#main-container').infinitescroll('unbind'); // ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){ // 要素を表示
$('#main-container').infinitescroll('retrieve');
return false; // ボタンのリンクは無効
});
$('.article-list').hide().delay(100).fadeIn(1000); // コンテンツのフェードイン
</script>
</body>
</html>
HTML(index-3.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* 無限スクロールの設定 */
.navigation {
display: none;
}
</style>
</head>
<body>
<div class="container">
<!-- 無線スクロールの定義 -->
<div id="main-container">
<p>※スクロールすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
<p>※サーバーに格納されていないと動作しません。</p>
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
<!-- 無限スクロール領域 -->
<ol class="article-list">
<li>テキスト-03-01</li><li>テキスト-03-02</li><li>テキスト-03-03</li><li>テキスト-03-04</li><li>テキスト-03-05</li> <!-- 01~05行 -->
<li>テキスト-03-06</li><li>テキスト-03-07</li><li>テキスト-03-08</li><li>テキスト-03-09</li><li>テキスト-03-10</li> <!-- 06~10行 -->
<li>テキスト-03-11</li><li>テキスト-03-12</li><li>テキスト-03-13</li><li>テキスト-03-14</li><li>テキスト-03-15</li> <!-- 11~15行 -->
<li>テキスト-03-16</li><li>テキスト-03-17</li><li>テキスト-03-18</li><li>テキスト-03-19</li><li>テキスト-03-20</li> <!-- 16~20行 -->
<li>テキスト-03-21</li><li>テキスト-03-22</li><li>テキスト-03-23</li><li>テキスト-03-24</li><li>テキスト-03-25</li> <!-- 21~25行 -->
<li>テキスト-03-26</li><li>テキスト-03-27</li><li>テキスト-03-28</li><li>テキスト-03-29</li><li>テキスト-03-30</li> <!-- 26~30行 -->
<li>テキスト-03-31</li><li>テキスト-03-32</li><li>テキスト-03-33</li><li>テキスト-03-34</li><li>テキスト-03-35</li> <!-- 31~35行 -->
<li>テキスト-03-36</li><li>テキスト-03-37</li><li>テキスト-03-38</li><li>テキスト-03-39</li><li>テキスト-03-40</li> <!-- 36~40行 -->
<li>テキスト-03-41</li><li>テキスト-03-42</li><li>テキスト-03-43</li><li>テキスト-03-44</li><li>テキスト-03-45</li> <!-- 41~45行 -->
<li>テキスト-03-46</li><li>テキスト-03-47</li><li>テキスト-03-48</li><li>テキスト-03-49</li><li>テキスト-03-50</li> <!-- 46~50行 -->
</ol>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
<div class="navigation"><a href="index-2.html">続きを表示</a></div>
</div>
</div>
<!-- 無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
{
navSelector: ".navigation", // 次ページリンクを囲んでいるクラス
nextSelector: ".navigation a", // 次ページリンクのクラス
itemSelector: ".article-list li", // 無限スクロールする要素
maxPage: 3, // ページ数 */
dataType: "html",
animate: true,
extraScrollPx: 200,
loading: { // 全て終了時のメッセージ
img: "images/loading.gif",
finishedMsg: "全ての読み込みが終了"
}
},
function(newElements) { // 追加部のフェードインとボタンの移動
$(newElements).hide().delay(100).fadeIn(600);
$(".navigation").appendTo("#main-container").delay(300).fadeIn(600);
}
);
$('#main-container').infinitescroll('unbind'); // ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){ // 要素を表示
$('#main-container').infinitescroll('retrieve');
return false; // ボタンのリンクは無効
});
$('.article-list').hide().delay(100).fadeIn(1000); // コンテンツのフェードイン
</script>
</body>
</html>
HTML(index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンをクリックして無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* ▼▼▼ CSS(ここから)(※2) ▼▼▼ */
/* ボタンをクリックして無限スクロールの設定 */
.navigation {
width: 90%;
margin: 20px auto;
background: steelblue;
color: #fff;
text-align: center;
}
.navigation a {
display: block;
width: 100%;
padding: 20px;
text-decoration: none;
color: #fff;
}
.navigation a:hover {
opacity: 0.6;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>
<body>
<div class="container">
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
<!-- ボタンをクリックして無線スクロールの定義 -->
<div id="main-container">
<p>※クリックすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
<p>※サーバーに格納されていないと動作しません。</p>
<!-- ボタンをクリックして無限スクロール領域 -->
<ol class="article-list">
<li>テキスト-01-01</li><li>テキスト-01-02</li><li>テキスト-01-03</li><li>テキスト-01-04</li><li>テキスト-01-05</li> <!-- 01~05行 -->
<li>テキスト-01-06</li><li>テキスト-01-07</li><li>テキスト-01-08</li><li>テキスト-01-09</li><li>テキスト-01-10</li> <!-- 06~10行 -->
<li>テキスト-01-11</li><li>テキスト-01-12</li><li>テキスト-01-13</li><li>テキスト-01-14</li><li>テキスト-01-15</li> <!-- 11~15行 -->
<li>テキスト-01-16</li><li>テキスト-01-17</li><li>テキスト-01-18</li><li>テキスト-01-19</li><li>テキスト-01-20</li> <!-- 16~20行 -->
<li>テキスト-01-21</li><li>テキスト-01-22</li><li>テキスト-01-23</li><li>テキスト-01-24</li><li>テキスト-01-25</li> <!-- 21~25行 -->
<li>テキスト-01-26</li><li>テキスト-01-27</li><li>テキスト-01-28</li><li>テキスト-01-29</li><li>テキスト-01-30</li> <!-- 26~30行 -->
<li>テキスト-01-31</li><li>テキスト-01-32</li><li>テキスト-01-33</li><li>テキスト-01-34</li><li>テキスト-01-35</li> <!-- 31~35行 -->
<li>テキスト-01-36</li><li>テキスト-01-37</li><li>テキスト-01-38</li><li>テキスト-01-39</li><li>テキスト-01-40</li> <!-- 36~40行 -->
<li>テキスト-01-41</li><li>テキスト-01-42</li><li>テキスト-01-43</li><li>テキスト-01-44</li><li>テキスト-01-45</li> <!-- 41~45行 -->
<li>テキスト-01-46</li><li>テキスト-01-47</li><li>テキスト-01-48</li><li>テキスト-01-49</li><li>テキスト-01-50</li> <!-- 46~50行 -->
</ol>
<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
<div class="navigation"><a href="index-2.html">続きを表示</a></div>
</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>
<!-- ▼▼▼ SCRIPT(ここから)(※4) ▼▼▼ -->
<!-- ボタンをクリックして無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
{
navSelector: ".navigation", // 次ページリンクを囲んでいるクラス
nextSelector: ".navigation a", // 次ページリンクのクラス
itemSelector: ".article-list li", // 無限スクロールする要素
maxPage: 3, // ページ数 */
dataType: "html",
animate: true,
extraScrollPx: 200,
loading: { // 全て終了時のメッセージ
img: "images/loading.gif",
finishedMsg: "全ての読み込みが終了"
}
},
function(newArticle) { // 追加部のフェードインとボタンの移動
$(newArticle).hide().delay(100).fadeIn(600);
$(".navigation").appendTo("#main-container").css("display", "block");
}
);
$('.article-list').infinitescroll('unbind'); // ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){ // 要素を表示
$('.article-list').infinitescroll('retrieve');
return false; // ボタンのリンクは無効
});
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->
</script>
</body>
</html>
HTML(index-2.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンをクリックして無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* ボタンをクリックして無限スクロールの設定 */
.navigation {
width: 90%;
margin: 20px auto;
background: steelblue;
color: #fff;
text-align: center;
}
.navigation a {
display: block;
width: 100%;
padding: 20px;
text-decoration: none;
color: #fff;
}
.navigation a:hover {
opacity: 0.6;
}
</style>
</head>
<body>
<div class="container">
<!-- ボタンをクリックして無線スクロールの定義 -->
<div id="main-container">
<p>※クリックすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
<p>※サーバーに格納されていないと動作しません。</p>
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
<!-- ボタンをクリックして無限スクロール領域 -->
<ol class="article-list">
<li>テキスト-02-01</li><li>テキスト-02-02</li><li>テキスト-02-03</li><li>テキスト-02-04</li><li>テキスト-02-05</li> <!-- 01~05行 -->
<li>テキスト-02-06</li><li>テキスト-02-07</li><li>テキスト-02-08</li><li>テキスト-02-09</li><li>テキスト-02-10</li> <!-- 06~10行 -->
<li>テキスト-02-11</li><li>テキスト-02-12</li><li>テキスト-02-13</li><li>テキスト-02-14</li><li>テキスト-02-15</li> <!-- 11~15行 -->
<li>テキスト-02-16</li><li>テキスト-02-17</li><li>テキスト-02-18</li><li>テキスト-02-19</li><li>テキスト-02-20</li> <!-- 16~20行 -->
<li>テキスト-02-21</li><li>テキスト-02-22</li><li>テキスト-02-23</li><li>テキスト-02-24</li><li>テキスト-02-25</li> <!-- 21~25行 -->
<li>テキスト-02-26</li><li>テキスト-02-27</li><li>テキスト-02-28</li><li>テキスト-02-29</li><li>テキスト-02-30</li> <!-- 26~30行 -->
<li>テキスト-02-31</li><li>テキスト-02-32</li><li>テキスト-02-33</li><li>テキスト-02-34</li><li>テキスト-02-35</li> <!-- 31~35行 -->
<li>テキスト-02-36</li><li>テキスト-02-37</li><li>テキスト-02-38</li><li>テキスト-02-39</li><li>テキスト-02-40</li> <!-- 36~40行 -->
<li>テキスト-02-41</li><li>テキスト-02-42</li><li>テキスト-02-43</li><li>テキスト-02-44</li><li>テキスト-02-45</li> <!-- 41~45行 -->
<li>テキスト-02-46</li><li>テキスト-02-47</li><li>テキスト-02-48</li><li>テキスト-02-49</li><li>テキスト-02-50</li> <!-- 46~50行 -->
</ol>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
<div class="navigation"><a href="index-2.html">続きを表示</a></div>
</div>
</div>
<!-- ボタンをクリックして無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
{
navSelector: ".navigation", // 次ページリンクを囲んでいるクラス
nextSelector: ".navigation a", // 次ページリンクのクラス
itemSelector: ".article-list li", // 無限スクロールする要素
maxPage: 3, // ページ数 */
dataType: "html",
animate: true,
extraScrollPx: 200,
loading: { // 全て終了時のメッセージ
img: "images/loading.gif",
finishedMsg: "全ての読み込みが終了"
}
},
function(newArticle) { // 追加部のフェードインとボタンの移動
$(newArticle).hide().delay(100).fadeIn(600);
$(".navigation").appendTo("#main-container").css("display", "block");
}
);
$('.article-list').infinitescroll('unbind'); // ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){ // 要素を表示
$('.article-list').infinitescroll('retrieve');
return false; // ボタンのリンクは無効
});
</script>
</body>
</html>
HTML(index-3.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタンをクリックして無限スクロールのサンプル</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<style>
body,div,h1,h2,h3,h4,h5,h6,pre,p,a,select,header,nav,main,section,footer,ul,li {
padding: 0;
margin: 0;
font-size: 16px;
line-height: 1.6;
word-wrap: break-word;
box-sizing: border-box;
}
body {
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
}
.container {
padding: 10px;
border: #fff 1px solid;
}
/* ボタンをクリックして無限スクロールの設定 */
.navigation {
width: 90%;
margin: 20px auto;
background: steelblue;
color: #fff;
text-align: center;
}
.navigation a {
display: block;
width: 100%;
padding: 20px;
text-decoration: none;
color: #fff;
}
.navigation a:hover {
opacity: 0.6;
}
</style>
</head>
<body>
<div class="container">
<!-- ボタンをクリックして無線スクロールの定義 -->
<div id="main-container">
<p>※クリックすると2ページ目と3ページ目のHTMLファイルを連続して表示します。</p>
<p>※1つのHTMLファイルに50行のテキストが格納されています。</p>
<p>※サーバーに格納されていないと動作しません。</p>
<!-- ▼▼▼ HTML(ここから)(※3) ▼▼▼ -->
<!-- ボタンをクリックして無限スクロール領域 -->
<ol class="article-list">
<li>テキスト-03-01</li><li>テキスト-03-02</li><li>テキスト-03-03</li><li>テキスト-03-04</li><li>テキスト-03-05</li> <!-- 01~05行 -->
<li>テキスト-03-06</li><li>テキスト-03-07</li><li>テキスト-03-08</li><li>テキスト-03-09</li><li>テキスト-03-10</li> <!-- 06~10行 -->
<li>テキスト-03-11</li><li>テキスト-03-12</li><li>テキスト-03-13</li><li>テキスト-03-14</li><li>テキスト-03-15</li> <!-- 11~15行 -->
<li>テキスト-03-16</li><li>テキスト-03-17</li><li>テキスト-03-18</li><li>テキスト-03-19</li><li>テキスト-03-20</li> <!-- 16~20行 -->
<li>テキスト-03-21</li><li>テキスト-03-22</li><li>テキスト-03-23</li><li>テキスト-03-24</li><li>テキスト-03-25</li> <!-- 21~25行 -->
<li>テキスト-03-26</li><li>テキスト-03-27</li><li>テキスト-03-28</li><li>テキスト-03-29</li><li>テキスト-03-30</li> <!-- 26~30行 -->
<li>テキスト-03-31</li><li>テキスト-03-32</li><li>テキスト-03-33</li><li>テキスト-03-34</li><li>テキスト-03-35</li> <!-- 31~35行 -->
<li>テキスト-03-36</li><li>テキスト-03-37</li><li>テキスト-03-38</li><li>テキスト-03-39</li><li>テキスト-03-40</li> <!-- 36~40行 -->
<li>テキスト-03-41</li><li>テキスト-03-42</li><li>テキスト-03-43</li><li>テキスト-03-44</li><li>テキスト-03-45</li> <!-- 41~45行 -->
<li>テキスト-03-46</li><li>テキスト-03-47</li><li>テキスト-03-48</li><li>テキスト-03-49</li><li>テキスト-03-50</li> <!-- 46~50行 -->
</ol>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
<!-- 次のページを読み込むきっかけのクラス名をnavigationに指定-->
<div class="navigation"><a href="index-2.html">続きを表示</a></div>
</div>
</div>
<!-- ボタンをクリックして無限スクロールの制御 -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$('.article-list').infinitescroll(
{
navSelector: ".navigation", // 次ページリンクを囲んでいるクラス
nextSelector: ".navigation a", // 次ページリンクのクラス
itemSelector: ".article-list li", // 無限スクロールする要素
maxPage: 3, // ページ数 */
dataType: "html",
animate: true,
extraScrollPx: 200,
loading: { // 全て終了時のメッセージ
img: "images/loading.gif",
finishedMsg: "全ての読み込みが終了"
}
},
function(newArticle) { // 追加部のフェードインとボタンの移動
$(newArticle).hide().delay(100).fadeIn(600);
$(".navigation").appendTo("#main-container").css("display", "block");
}
);
$('.article-list').infinitescroll('unbind'); // ボタンをクリックしたら初期値に戻す
$(".navigation a").click(function(){ // 要素を表示
$('.article-list').infinitescroll('retrieve');
return false; // ボタンのリンクは無効
});
</script>
</body>
</html>