HTML-CSS入門講座

濱屋太郎

WebParts-3
画面スクロールパーツ

目次

P3.1 はじめに

P3.1.1 概要

  • 「画面スクロールパーツ」は、ページトップリンク、スクロールダウン、スクロール表示などの画面スクロールパーツを説明します。
  • 「画面スクロールパーツ」で説明している機能は、以下の通りです。
(1) ページトップリンク
ページトップボタンを押下することでページトップまでのスクロールを実施します。
(2) スクロールダウン
画面の表示状況によりページのスクロールを即するためのボタン類を表示します。
(3) アニメーション表示
画面のスクロール状況によりページに配置してあるアイテムをアニメーションを付けて表示しま。
(4) ヘッダー固定
ページのスクロールを行ってもヘッダー部を固定部に表示したままにします。
(5) ページ内リンク
ページ内の目的の場所にスクロールを実施します。

P3.2 ページトップリンク

P3.2.1 ページトップリンク(JavaScript版)

(1) 説明

  • JavScriptだけで実現するトップに戻るボタンです。JavaScriptだけで実現できますのでシンプルに実現することができます。
  • 本サイト開発時点では、一部のブラウザでCSSでのスムーズスクロール機能をサポートしていないものがありますのでスムーズスクロールが必須の場合は、jQueryの使用をお勧めします。
  • ボタンのデザインは、適時変更してください。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
  • 使用しません。
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-top-01
    • index.html

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップ(JavaScript版の基本形)のサンプル</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(ここから) ▼▼▼ */
/* ページトップ(JavaScript版の基本形)の設定 */
#page-top {								/* スクロールボタンの配置位置 */
	display: block;
	width: 60px;
	line-height: 60px;
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	border-radius: 30px;
	background: #c91515;				/* スクロールボタンの背景色 */
	opacity: 0;
	font-size: 2.4rem;
	color: #fff;						/* スクロールボタンの文字色 */
	text-align: center;
	text-decoration: none;
}
#page-top:hover{
	cursor: pointer;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51~55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56~60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61~65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66~70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
<!-- ページトップ(JavaScript版の基本形)の定義 -->
<p id="page-top">▲</p> 
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ページトップ(JavaScript版の基本形)の制御 -->
<script>
const scroll_top_btn = document.querySelector('#page-top');
scroll_top_btn.addEventListener('click', click_event);		/* クリック時のイベントを追加 */
function click_event() {									/* クリック時のイベント処理 */
	window.scroll({											/* ページトップへスムーズスクロール */
		top: 0, 
		behavior: 'smooth',
	});
};
window.addEventListener('scroll' , scroll_event );			/* スクロール時のイベントを追加 */
function scroll_event() {									/* スクロール時のイベント処理 */
	if(window.pageYOffset > 200) {							/* スクロール位置が200pxを超えているか? */
		scroll_top_btn.style.opacity = '0.8';				/* スクロールボタンを表示 */
	}
	else {
		scroll_top_btn.style.opacity = '0';					/* スクロールボタンを非表示 */
	}
}
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P3.2.2 ページトップリンク(jQuery版基本形)

(1) 説明

  • jQueryで実現するトップに戻るボタンです。
  • ボタンのデザインは、適時変更してください。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-top-02
    • index.html
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップ(jQueryの基本形)のサンプル</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(ここから) ▼▼▼ */
/* ページトップ(jQueryの基本形)の設定 */
#page-top {								/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	transform: translateY(100px);
}
@keyframes UpAnime{						/* スクロールボタンを上に上げるアニメーション */
	from {
		transform: translateY(100px);
	}
	to {
		transform: translateY(0);
	}
}
#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes DownAnime{					/* スクロールボタンを下に下げるアニメーション */
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100px);
	}
}
#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}
#page-top a {							/* スクロールボタンのスタイル設定 */
	display: block;
	width: 60px;
	line-height: 60px;
	border-radius: 30px;
	background: #c91515;				/* スクロールボタンの背景色 */
	opacity: 0.8;
	font-size: 2.4rem;
	color: #fff;						/* スクロールボタンの文字色 */
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}
#page-top a:hover{
	opacity: 0.6;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51~55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56~60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61~65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66~70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
<!-- ページトップ(jQueryの基本形)の定義 -->
<p id="page-top">
	<a href="#">▲</a>
</p> 
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<!-- ページトップ(jQueryの基本形)の制御 -->
<script>
function PageTopAnime() {							/* スクロールボタンの動作設定 */
	var scroll = $(window).scrollTop();
	if (scroll >= 200) {							/* 上から200pxスクロールしたらスクロールボタンを下から表示 */
		$('#page-top').removeClass('DownMove');
		$('#page-top').addClass('UpMove');
	}
	else {
		if($('#page-top').hasClass('UpMove')) {		/* スクロールボタンが表示されていたらボタンを下に隠す */
			$('#page-top').removeClass('UpMove');
			$('#page-top').addClass('DownMove');
		}
	}
}
$(window).scroll(function () {						/* 画面がスクロールされたらスクロールボタンの制御を実施 */
	PageTopAnime();
});
$(window).on('load', function () {					/* 画面読み込み時にスクロールボタンの制御を実施 */
	PageTopAnime();
});
$('#page-top a').click(function () {				/* スクロールボタンがクリックされたらスクロールアニメーションを実施 */
	 $('body,html').animate({
		scrollTop: 0								/* ページトップまでスクロール */
	}, 500);										/* ページトップスクロールの速さ(数字が大きいほど遅くなる) */
	return false;									/* リンク自体のリンク設定は無効化 */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P3.2.3 ページトップリンク(jQuery版ボタンデザイン変更)

(1) 説明

  • jQueryで実現するトップに戻るボタンの基本形に対してボタンデザインを変更しました。
  • ボタンのデザインは、適時変更してください。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-top-03
    • index.html
    • js
      • jquery-3.6.0.min.js

HTML(index.html)


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページトップ(jQueryの基本形でデザイン変更)のサンプル</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(ここから) ▼▼▼ */
/* ページトップ(jQueryの基本形でデザイン変更)の設定 */
#page-top {								/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	transform: translateY(100px);
}
@keyframes UpAnime{						/* スクロールボタンを上に上げるアニメーション */
	from {
		transform: translateY(100px);
	}
	to {
		transform: translateY(0);
	}
}
#page-top.UpMove {
	animation: UpAnime 0.5s forwards;
}
@keyframes DownAnime{					/* スクロールボタンを下に下げるアニメーション */
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(100px);
	}
}
#page-top.DownMove {
	animation: DownAnime 0.5s forwards;
}
#page-top a {							/* スクロールボタンのスタイル設定 */
	display: block;
	width: 60px;
	height: 60px;
	padding-top: 20px;
	border-radius: 8px;
	background: #1c739d;				/* スクロールボタンの背景色 */
	opacity: 0.8;
	font-size: 2.2rem;
	line-height: 0.8rem;
	color: #fff;						/* スクロールボタンの文字色 */
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
}
#page-top a span {
	font-size: 0.6rem;
}
#page-top a:hover{
	opacity: 0.6;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51~55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56~60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61~65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66~70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
<!-- ページトップ(jQueryの基本形でデザイン変更)の定義 -->
<p id="page-top">
	<a href="#">▲<br><span>Page Top</span></a>
</p> 
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ページトップ(jQueryの基本形でデザイン変更)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function PageTopAnime() {							/* スクロールボタンの動作設定 */
	var scroll = $(window).scrollTop();
	if (scroll >= 200) {							/* 上から200pxスクロールしたらスクロールボタンを下から表示 */
		$('#page-top').removeClass('DownMove');
		$('#page-top').addClass('UpMove');
	}
	else {
		if($('#page-top').hasClass('UpMove')) {		/* スクロールボタンが表示されていたらボタンを下に隠す */
			$('#page-top').removeClass('UpMove');
			$('#page-top').addClass('DownMove');
		}
	}
}
$(window).scroll(function () {						/* 画面がスクロールされたらスクロールボタンの制御を実施 */
	PageTopAnime();
});
$(window).on('load', function () {					/* 画面読み込み時にスクロールボタンの制御を実施 */
	PageTopAnime();
});
$('#page-top a').click(function () {				/* スクロールボタンがクリックされたらスクロールアニメーションを実施 */
	 $('body,html').animate({
		scrollTop: 0								/* ページトップまでスクロール */
	}, 500);										/* ページトップスクロールの速さ(数字が大きいほど遅くなる) */
	return false;									/* リンク設定は無効化 */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P3.2.4 ページトップリンク(歩く肉球)

(1) 説明

  • 肉球が歩いてトップに戻るスクロールをイメージしました。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-top-04
    • index.html
    • images
      • foot-l.png
      • foot-r.png
    • js
      • jquery-3.6.0.min.js

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(ここから) ▼▼▼ */
/* ページトップ(歩く肉球)の設定 */
#page-top a.foot-wrapper {				/* 肉球の配置 */
	display: block;
	text-decoration: none;
	transition: all 0.3s;
	position: relative;
}
#page-top div img,
#page-top a.foot-wrapper div img {
	width: 60px;
}
#page-top a.foot-wrapper div.foot1 {
	padding-left: 50px;
}
#page-top div.foot2,
#page-top div.foot4 {
	opacity: 0;
}
#page-top div.foot3 {
	opacity: 0;
	padding-left: 50px;
}
#page-top a.foot-wrapper div.arrow {
	position: absolute;
	right: 18px;
	bottom: 13px;
	font-size: 10px;
	line-height: 1.2;
	color: #fff;
	text-align: center;
}
#page-top a:hover{
	opacity: 0.6;
}
#page-top {								/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);
}
@keyframes anime-up {					/* スクロールボタンを上に上げるアニメーション */
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#page-top.move-up {
	animation: anime-up 0.5s forwards;
}
@keyframes anime-down {					/* スクロールボタンを下に下げるアニメーション */
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(100px);
	}
}
#page-top.move-down {
	animation: anime-down 0.5s forwards;
}
#page-top.run-foot div.foot2 {			/* 肉入を歩かせる */
	transition-delay: 0s;
	opacity: 1;
}
#page-top.run-foot div.foot3 {
	transition-delay: 0.4s;
	opacity: 1;
}
#page-top.run-foot div.foot4 {
	transition-delay: 0.8s;
	opacity: 1;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51~55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56~60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61~65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66~70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
<!-- ページトップ(歩く肉球)の定義 -->
<div id="page-top">
	<div class="foot4"><img src="images/foot-l.png" alt="左足"></div>
	<div class="foot3"><img src="images/foot-r.png" alt="右足"></div>
	<div class="foot2"><img src="images/foot-l.png" alt="左足"></div>
	<a class="foot-wrapper" href="#">
		<div class="foot1"><img src="images/foot-r.png" alt="右足"></div>
		<div class="arrow">PAGE<br>TOP</div>
	</a>
</div> 
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ページトップ(歩く肉球)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function PageTopAnime() {							/* スクロール時の動作設定 */
	var scroll = $(window).scrollTop();
	if (scroll >= 200) {							/* 上から200pxスクロールしたらスクロールボタンを下から表示 */
		$('#page-top').removeClass('move-down');
		$('#page-top').addClass('move-up');
	}
	else {
		if (scroll == 0) {							/* トップにいる時は、肉球があるくのを停止 */
			$('#page-top').removeClass('run-foot');
		}
		if($('#page-top').hasClass('move-up')) {	/* スクロールボタンが表示されていたらボタンを下に隠す */
			$('#page-top').removeClass('move-up');
			$('#page-top').addClass('move-down');
		}
	}
}
$(window).scroll(function () {						/* 画面がスクロールされたらスクロールボタンの制御を実施 */
	PageTopAnime();
});

$(window).on('load', function () {					/* 画面読み込み時にスクロールボタンの制御を実施 */
	PageTopAnime();
});

$('#page-top a').click(function () {				/* スクロールボタンがクリックされたらスクロールアニメーションを実施 */
	$('#page-top').addClass('run-foot');			/* ページトップまでスクロール */
	$('body,html').animate({
		scrollTop: 0,
	}, 1200);										/* ページトップスクロールの速さ(数字が大きいほど遅くなる) */
	return false;									/* リンク設定は無効化 */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>
■ 画像
  • 左足画像 (foot-l.png:左足画像)
  • 右足画像 (foot-r.png:右足画像)

P3.2.5 ページトップリンク(ロケット発射)

(1) 説明

  • ロケットが発射してトップに戻るスクロールをイメージしました。

(2) 表示形式

  • スクロールしてページトップボタンが表示されることを確認してください。
  • ページトップボタンをクリックしてページトップまでスクロールされることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-top-05
    • index.html
    • images
      • rocket-body.png
      • rocket-flame.png
    • js
      • jquery-3.6.0.min.js

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(ここから) ▼▼▼ */
/* ページトップ(ロケット)の設定 */
#page-top {										/* スクロールボタンの配置位置 */
	position: fixed;
	right: 10px;
	bottom:10px;
	z-index: 2;
	opacity: 0;
	transform: translateY(100px);				/* ウィンドウの枠外に隠しておく */
}
#page-top a:hover{
	opacity: 0.6;
}
#page-top a.rocket-wrapper {					/* ロケット枠領域 */
	display: block;
	text-decoration: none;
	transition: all 0.3s;
	position: relative;
}
#page-top div img,
#page-top a.rocket-wrapper div img {
	width: 60px;
	vertical-align: top;
}
#page-top div.rocket-flame {					/* 炎(最初は非表示) */
	display: none;
}
#page-top a.rocket-wrapper div.arrow {	/* 'TOP PAGE'文字 */
	position: absolute;
	right: 14px;
	bottom: 9px;
	font-size: 12px;
	line-height: 1.2;
	color: #fff;
	text-align: center;
}
@keyframes anime-up {							/* スクロールボタンを上に上げるアニメーション */
	from {
		opacity: 0;
		transform: translateY(160px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
#page-top.move-up {
	animation: anime-up 0.5s forwards;
}
@keyframes anime-down {							/* スクロールボタンを下に下げるアニメーション */
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 1;
		transform: translateY(160px);
	}
}
#page-top.move-down {
	animation: anime-down 0.5s forwards;
}
#page-top.rocket-launch {						/* ロケット発射 */
	animation: anime-launch 1s forwards ease-in;
}
@keyframes anime-launch {
	from {
		opacity: 1;
		bottom: 10px;
	}
	to {
		opacity: 0;
		bottom: calc(100vh + 100px);
	}
}
#page-top.rocket-launch div.rocket-flame {		/* 炎を表示 */
	display: block;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51~55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56~60行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 61~65行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 66~70行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
<!-- ページトップ(ロケット)の定義 -->
<div id="page-top">
	<a class="rocket-wrapper" href="#">
		<div class="rocket-body1"><img src="images/rocket-body.png" alt="ロケット本体"></div>
		<div class="arrow">PAGE<br>TOP</div>
	</a>
	<div class="rocket-flame"><img src="images/rocket-flame.png" alt="ロケット炎"></div>
</div> 
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ページトップ(ロケット)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function PageTopAnime() {									/* スクロールボタンの動作設定 */
	var scroll = $(window).scrollTop();
	if (scroll >= 200) {									/* 上から200pxスクロールしたらスクロールボタンを下から表示 */
		if (!($('#page-top').hasClass('rocket-launch'))) {	/* 打上げ中じゃない時 */
			$('#page-top').removeClass('move-down');
			$('#page-top').addClass('move-up');				/* ロケットを表示 */
		}
	}
	else {													/* 上から200px以内の時は、スクロールボタンを下に隠す */
		if (scroll == 0) {									/* トップにいたら */
			$('#page-top').removeClass('rocket-launch');	/* 発射と止める */
		}
		if ($('#page-top').hasClass('move-up')) {			/* ロケットが表示されたいる時 */
			$('#page-top').removeClass('move-up');
			$('#page-top').addClass('move-down');			/* ロケットを非表示 */
		}
	}
}
$(window).scroll(function () {								/* 画面読み込み時にスクロールボタンの制御を実施 */
	PageTopAnime();
});

$(window).on('load', function () {							/* 画面読み込み時にスクロールボタンの制御を実施 */
	PageTopAnime();
});
$('#page-top a').click(function () {						/* スクロールボタンがクリックされたらスクロールアニメーションを実施 */
	$('#page-top').removeClass('move-up');					/* ロケットを非表示 */
	$('#page-top').addClass('rocket-launch');				/* 打上げ中に設定 */
	$('body,html').animate({
		scrollTop: 0										/* ページトップまでスクロール */
	}, 1000);												/* ページトップスクロールの速さ(数字が大きいほど遅くなる) */
	return false;											/* リンク設定は無効化 */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>
■ 画像
  • ロケット本体 (rocket-body.png:ロケット本体)
  • ロケット発射の炎 (rocket-flame.png:ロケット発射の炎)

P3.3 スクロールダウン

P3.3.1 スクロールダウン(丸が動いてスクロールを促す)

(1) 説明

  • 画面の右下にスクロールを促すアイコンを表示しスクロールするとページ本文が表示されます。

(2) 表示形式

  • スクロールしてページ本文が表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-down-01
    • index.html
    • images
      • sample-1920x1080-10.jpg

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 {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 丸が動いてスクロールを促すの設定 */
.scrolldown {							/* スクロールダウン部品 */
	position: absolute;
	bottom: 10px;
	right: 52px;
}
.scrolldown span {						/* Scrollテキスト */
	position: absolute;
	left: 7px;
	bottom: 16px;
	color: #eee;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	writing-mode: vertical-rl;
}
.scrolldown:before {					/* ●のアニメーション */
	content: "";
	position: absolute;
	bottom: 0;
	left: -7px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #eee;
	animation: circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove {					/* ●を移動 */
	0% {
		bottom: 76px;
	}
	100% {
		bottom: -2px;
	}
}
@keyframes cirlemovehide {				/* ●を透明→不透明→透明 */
	0% {
		opacity: 0
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
	}
 }
.scrolldown:after {						/* 線の描写 */
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 3px;
	height: 90px;
	background: #eee;
}
#header {								/* 最初に表示される画面 */
	width:100%;
	height: 100vh;
	position: relative;
} 
#header:before {						/* 最初に表示される画面の背景 */
	content: '';
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	background:url("images/sample-1920x1080-10.jpg") no-repeat center;
	background-size:cover;
}
h1 {									/* 最初に表示される画面のテキスト */
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
	font-size: 2em;
	color: #eee;
	text-shadow: 0 0 15px #666;
	text-align: center;
}
#main-container{						/* スクロールすると現れる領域 */
	position: relative;
	z-index: 1;
	background: #eee;
	padding: 20px 0;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- 丸が動いてスクロールを促す定義 -->
	<header id="header">
		<h1>最初に表示される画面</h1>
		<div class="scrolldown"><span>Scroll</span></div>
	</header>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<div id="main-container">
		<p>このエリアがスクロールすると上にかぶさります。</p> 
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51~55行 -->
		</ol>
	</div>
</div>

</body>
</html>

P3.3.2 スクロールダウン(矢印が動いてスクロールを促す)

(1) 説明

  • 画面の右下にスクロールを促すアイコンを表示しスクロールするとページ本文が表示されます。

(2) 表示形式

  • スクロールしてページ本文が表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用しません。
jQuery
  • 使用しません。
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-down-02
    • index.html
    • images
      • sample-1920x1080-11.jpg

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 {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* 矢印が動いてスクロールを促すの設定 */
.scrolldown {							/* スクロールダウン部品 */
	position: absolute;
	bottom: 1px;
	right: 44px;
	animation: arrowmove 1s ease-in-out infinite;
}
@keyframes arrowmove {
	0% {
		bottom: 1%;
	}
	50% {
		bottom: 3%;
	}
	100% {
		bottom: 1%;
	}
}
.scrolldown span {						/* Scrollテキスト */
	position: absolute;
	left: 0px;
	bottom: 30px;
	color: #eee;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	writing-mode: vertical-rl;
}
.scrolldown:before {					/* 矢印(矢)の描画 */
	content: "";
	position: absolute;
	bottom: 0;
	left: 4px;
	width: 2px;
	height: 20px;
	background: #eee;
	transform: skewX(-31deg);
}
.scrolldown:after {						/* 矢印(棒)の描画 */
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 2px;
	height: 95px;
	background: #eee;
}
#header {								/* 最初に表示される画面 */
	width:100%;
	height: 100vh;
	position: relative;
} 
#header:before {						/* 最初に表示される画面の背景 */
	content: '';
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height: 100vh;
	background:url("images/sample-1920x1080-11.jpg") no-repeat center;
	background-size:cover;
}
h1 {									/* 最初に表示される画面のテキスト */
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
	font-size: 2em;
	color: #eee;
	text-shadow: 0 0 15px #666;
	text-align: center;
}
#main-container{						/* スクロールすると現れる領域 */
	position: relative;
	z-index: 1;
	background: #eee;
	padding: 20px 0;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- 矢印が動いてスクロールを促す定義 -->
	<header id="header">
		<h1>最初に表示される画面</h1>
		<div class="scrolldown"><span>Scroll</span></div>
	</header>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<div id="main-container">
		<p>このエリアがスクロールすると上にかぶさります。</p> 
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51~55行 -->
		</ol>
	</div>
</div>

</body>
</html>

P3.3.3 スクロールダウン(スクロール量を示すバーを配置)

(1) 説明

  • ヘッダーエリアの下部にスクロール状況を示すバーを配置しスクロール量に合わせてバーが伸びます。

(2) 表示形式

  • スクロールしてヘッダーエリア下部のバーが伸びることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-down-03
    • index.html
    • js
      • jquery-3.6.0.min.js
      • scrollgress.min.js

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 {
	border: #fff 1px solid;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* スクロール位置に合わせて線が伸びるの設定 */
.scrollgress {							/* スクロールバーの設定 */
	z-index: 999;						/* 他エリアより前に出す */
	top: 70px!important;				/* fixedで設置しているheaderの下にバーを出す */
}
#header {								/* ヘッダー部 */
	position: fixed;
	top: 0;
	width: 100%;
	height: 70px;
	padding-top: 25px;
	background: steelblue;
	color: #fff;
	text-align: center;
	z-index: 2;
}
#main-container {
	padding-top: 80px;
	padding-left: 10px;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- スクロール位置に合わせて線が伸びる定義 -->
	<header id="header">
		<h1>ヘッダーエリア</h1>
	</header>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
	<div id="main-container">
		<p>スクロールするとヘッダーエリアの下線が伸びます。</p> 
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 51~55行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 56~60行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- スクロール位置に合わせて線が伸びる制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="js/scrollgress.min.js" type="text/javascript"></script>
<script>
$('#main-container').scrollgress({		/* バーの高さの基準となるエリア指定 */
	height: '8px',						/* バーの高さ */
	color: 'crimson',					/* バーの色 */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P3.3.4 スクロールダウン(スクロールで後続コンテンツを表示(自動))

(1) 説明

  • スクロールすると後続するHTMLファイルに格納されているコンテンツを自動で表示します。

(2) 表示形式

  • スクロールして後続するHTMLファイルに格納されているコンテンツが自動で表示されることを確認してください。
  • 本機能は、コンテンツがサーバーに格納された状態でないと動作しません。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-down-04
    • index.html
    • index-2.html
    • index-3.html
    • images
      • loading.gif
    • js
      • jquery.infinitescroll.min.js
      • jquery-3.6.0.min.js

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(ここから) ▼▼▼ */
/* 無限スクロールの設定 */
.navigation {
	display: none;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<!-- 無線スクロールの定義 -->
	<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(ここから) ▼▼▼ -->
<!-- 無限スクロールの制御 -->
<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(ここから) ▼▼▼ -->
		<!-- 無限スクロール領域 -->
		<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(ここから) ▼▼▼ -->
		<!-- 無限スクロール領域 -->
		<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>

P3.3.5 スクロールダウン(スクロールで後続コンテンツを表示(確認有り))

(1) 説明

  • スクロールし確認後に後続するHTMLファイルに格納されているコンテンツを表示します。

(2) 表示形式

  • スクロールして後続するHTMLファイルに格納されているコンテンツが自動で表示されることを確認してください。
  • 本機能は、コンテンツがサーバーに格納された状態でないと動作しません。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-down-05
    • index.html
    • index-2.html
    • index-3.html
    • images
      • loading.gif
    • js
      • jquery.infinitescroll.min.js
      • jquery-3.6.0.min.js

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(ここから) ▼▼▼ */
/* ボタンをクリックして無限スクロールの設定 */
.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(ここから) ▼▼▼ -->
	<!-- ボタンをクリックして無線スクロールの定義 -->
	<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(ここから) ▼▼▼ -->
<!-- ボタンをクリックして無限スクロールの制御 -->
<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(ここから) ▼▼▼ -->
		<!-- ボタンをクリックして無限スクロール領域 -->
		<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(ここから) ▼▼▼ -->
		<!-- ボタンをクリックして無限スクロール領域 -->
		<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>

P3.4 項目アニメーション表示

P3.4.1 項目アニメーション表示

(1) 説明

  • スクロール時の項目をアニメーション表示します。

(2) 表示形式

  • スクロールして写真コンテンツの表示形式を確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-fadein-01
    • index.html
    • images
      • sample-256x128-01.jpg
      • sample-256x128-02.jpg
      • sample-256x128-03.jpg
    • js
      • jquery-3.6.0.min.js

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;
}
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}

/* スクロールすると項目がフェードイン(基本形)の設定 */
.fadein-wrapper {
	overflow: hidden;
}
.fadein-wrapper div {
	width: calc(100% / 3);
	padding: 20px;
	text-align: center;
	float: left;
}
.fadein-wrapper div img {
	width: 100%;
}
/* ▼▼▼ CSS(ここから/使用するCSSを選択してコピーしてください) ▼▼▼ */
.fadeUp {								/* 画面外にいる項目(下から) */
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 500ms;
}
.fadeLeft {								/* 画面外にいる項目(左から) */
    opacity : 0;
    transform : translate(-50px, 0);
    transition : all 500ms;
}
.fadeRight {							/* 画面外にいる項目(右から) */
    opacity : 0;
    transform : translate(50px, 0);
    transition : all 500ms;
}
.fadeUp3s {								/* 画面外にいる項目(下から)(3秒) */
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 3000ms;
}
.fadeLeft3s {							/* 画面外にいる項目(左から)(3秒) */
    opacity : 0;
    transform : translate(-50px, 0);
    transition : all 2000ms;
}
.fadeRight3s {							/* 画面外にいる項目(右から)(3秒) */
    opacity : 0;
    transform : translate(50px, 0);
    transition : all 3000ms;
}
.fadein.scrollin {						/* 画面内に入った項目 */
    opacity : 1;
    transform : translate(0, 0);
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
	<!-- スクロールすると項目がフェードイン(基本形)の定義 -->
	<div class="wrapper">
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
		</ol>
		<p>※500msかけてフェードインします。</p>
		<div class="fadein-wrapper">
<!-- ▼▼▼ HTML(ここから/使用するHTMLを選択してコピーしてください) ▼▼▼ -->
			<div class="fadein fadeUp">下から<br><img src="images/sample-256x128-01.jpg" alt="サンプル01"></div>
			<div class="fadein fadeLeft">左から<br><img src="images/sample-256x128-02.jpg" alt="サンプル02"></div>
			<div class="fadein fadeRight">右から<br><img src="images/sample-256x128-03.jpg" alt="サンプル03"></div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
		</div>
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
		</ol>
		<p>※動きが分かり易いようにフェードイン時間を500msから3sに変更しました。</p>
		<div class="fadein-wrapper">
			<div class="fadein fadeUp3s">下から<br><img src="images/sample-256x128-01.jpg" alt="サンプル01"></div>
			<div class="fadein fadeLeft3s">左から<br><img src="images/sample-256x128-02.jpg" alt="サンプル02"></div>
			<div class="fadein fadeRight3s">右から<br><img src="images/sample-256x128-03.jpg" alt="サンプル03"></div>
		</div>
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
		</ol>
	</div>
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- スクロールすると項目がフェードイン(基本形)の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
function fadeAnime() {					/* アニメーション関数 */
	$('.fadein').each(function() {
		var elemPos = $(this).offset().top;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll > elemPos - windowHeight + 50) {
			$(this).addClass('scrollin');
		}
		else {
			$(this).removeClass('scrollin');
		}
	});
}
$(window).on('load', function(){		/* 画面読み込み時 */
	fadeAnime();
});
$(window).scroll(function () {			/* 画面スクロール時 */
	fadeAnime();
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P3.5 ヘッダー固定

P3.5.1 ヘッダー固定

(1) 説明

  • スクロール時にヘッダー部の形状が変更され上部に固定表示されるます。

(2) 表示形式

  • スクロールしてヘッダー部の形状が変更され上部に固定表示されることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-fixed-01
    • index.html
    • js
      • jquery-3.6.0.min.js
      /li>

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: 0px;
	border: #fff 1px solid;
}
a:hover {
	opacity: 0.6;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ヘッダーの固定化の設定 */
header {								/* ヘッダー部(非固定時のスタイル) */
	width: 100%;
	height: 100px;
	padding: 20px;
	border-bottom: #ccc 1px solid;
	background: rgb(199,234,255);
	overflow: hidden;
}
header h1 {
	width: calc(100% - 400px);
	font-size: 3rem;
	float: left;
}
@media screen and (max-width: 760px) {
	header h1 {
		display: none;
	}
}
header nav {
	width: 400px;
	float: right;
}
header nav ul {
	display: flex;
	list-style-type: none;
}
header nav ul li {
	width: calc(100% / 4);
	text-align: center;
}
header nav ul li a {
	display: block;
	line-height: 3;
	color: #000;
	text-decoration: none;
}
header.fixed {							/* ヘッダー(固定時のスタイル) */
	position: fixed;
	left: 0;
	top:0;
	height: 50px;
	padding: 20px 20px;
	background: #000;
}
header.fixed h1 {
	display: none;
}
header.fixed nav {
	float: none;
}
header.fixed nav ul li a {
	line-height: 1;
	color: #fff;
}
main {									/* メイン */
	width: 100%;
	padding: 20px;
}
footer {								/* フッタ */
	width: 100%;
	padding: 20px;
	text-align: center;
	border-top: #ccc 1px solid;
	background: rgb(199,234,255);
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<header>
		<h1>LOGO</h1>
		<nav>
			<ul>
				<li><a href="#">MENU1</a></li>
				<li><a href="#">MENU2</a></li>
				<li><a href="#">MENU3</a></li>
				<li><a href="#">MENU4</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<ol>
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 41~45行 -->
			<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 46~50行 -->
		</ol>
	</main>
	<footer>
		<p>Copyright&copy; ・・・</p>
	</footer>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ヘッダーの固定化の制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$(function() {
	$(window).scroll(function () {
		var headerBottom = $('header').outerHeight();
		if ($(window).scrollTop() > headerBottom) {
			$('header').addClass('fixed');
		}
		else {
			$('header').removeClass('fixed');
		}
	});
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P3.6 ページ内リンク

P3.6.1 ページ内リンク

(1) 説明

  • メニューをクリックするとページ内のリンク先にスクロールします。

(2) 表示形式

  • メニューをクリックしてページ内のリンク先にスクロールされることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-link-01
    • index.html
    • js
      • jquery-3.6.0.min.js

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 {
	border: #fff 1px solid;
	padding: 10px;
}
a:hover {
	opacity: 0.6;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ページ内リンクの設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
header {
	padding: 20px 0 10px 0;
	background: steelblue;
	color: #fff;
}
nav ul {
	padding: 0 20px 10px 20px;
	margin-bottom: 20px;
	overflow: hidden;
	background: steelblue;
	list-style-type: none;
}
nav ul li {
	width: calc(100% / 3);
	text-align: center;
	border-top: #ccc 1px solid;
	border-bottom: #ccc 1px solid;
	border-left: #ccc 1px solid;
	float: left;
}
nav ul li:last-child {
	border-right: #ccc 1px solid;
}
nav ul li a {
	display: block;
	padding: 10px 0;
	text-decoration: none;
	color: #fff;
}
nav ul li a::before {
	content: "▼";
	font-size: 1.4em;
	color: #ccc;
	padding-right: 0.5em;
}
h1 {
	font-size: 1.4em;
	text-align: center;
}
h2 {
	padding: 10px 0;
	font-size: 1.2em;
	text-align: center;
}
section {
	border: #ccc 1px solid;
	margin-bottom: 20px;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<div class="wrapper">
		<!-- ページ内リンクの定義 -->
		<header id="header">
			<h1>ヘッダーエリア</h1>
		</header>
		<nav>
			<ul id="page-link">
				<li><a href="#section-1">飛び先-1</a></li>
				<li><a href="#section-2">飛び先-2</a></li>
				<li><a href="#section-3">飛び先-3</a></li>
			</ul>
		</nav>
		<section id="section-1">
			<h2>飛び先-1</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			</ol>
		</section>
		<section id="section-2">
			<h2>飛び先-2</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			</ol>
		</section>
		<section id="section-3">
			<h2>飛び先-3</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			</ol>
		</section>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ページ内リンクの制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$('#page-link li a[href*="#"]').click(function () {
	var elmHash = $(this).attr('href');				/* リンク先のid */
	var pos = $(elmHash).offset().top;				/* リンク先の位置 */
	$('body,html').animate({scrollTop: pos}, 800);	/* 800msでスクロール */
	return false;									/* リンク処理は無効 */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

P3.6.2 ページ内リンク(ヘッダー固定)

(1) 説明

  • メニューをクリックするとページ内のリンク先にスクロールします。
  • ヘッダー部は、固定位置に表示されます。

(2) 表示形式

  • メニューをクリックしてページ内のリンク先にスクロールされることを確認してください。

別画面で表示

(3) 使用機能

JavaScript
  • 使用します。
jQuery
個別ライブラリィ
  • 使用しません。

(4) ソースコード

ソースコード表示
■ ファイル配置
  • scroll-link-02
    • index.html
    • js
      • jquery-3.6.0.min.js

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 {
	border: #fff 1px solid;
	padding: 10px;
}
a:hover {
	opacity: 0.6;
}

/* ▼▼▼ CSS(ここから) ▼▼▼ */
/* ページ内リンクの設定 */
.wrapper {
	max-width: 960px;
	margin: 0 auto;
}
header {
	width: calc(100% - 22px);
	position: fixed;
	top: 0px;
	left: 11px;
	padding: 20px 0;
	background: steelblue;
	color: #fff;
}
nav {
	padding-top: 10px;
}
nav ul {
	padding: 0 20px;
	overflow: hidden;
	background: steelblue;
	list-style-type: none;
}
nav ul li {
	width: calc(100% / 3);
	text-align: center;
	border-top: #ccc 1px solid;
	border-bottom: #ccc 1px solid;
	border-left: #ccc 1px solid;
	float: left;
}
nav ul li:last-child {
	border-right: #ccc 1px solid;
}
nav ul li a {
	display: block;
	padding: 5px 0;
	text-decoration: none;
	color: #fff;
}
nav ul li a::before {
	content: "▼";
	font-size: 1.4em;
	color: #ccc;
	padding-right: 0.5em;
}
@media screen and (max-width: 760px) {
	nav ul li a::before {
		content: "";
	}
}
h1 {
	font-size: 1.4em;
	text-align: center;
}
h2 {
	padding: 10px 0;
	font-size: 1.2em;
	text-align: center;
}
section {
	border: #ccc 1px solid;
	margin-bottom: 20px;
}
.space {
	height: 132px;
}
/* ▲▲▲ CSS(ここまで) ▲▲▲ */
</style>
</head>

<body>

<div class="container">
<!-- ▼▼▼ HTML(ここから) ▼▼▼ -->
	<div class="wrapper">
		<!-- ページ内リンクの定義 -->
		<header id="header">
			<h1>ヘッダーエリア</h1>
			<nav>
				<ul id="page-link">
					<li><a href="#section-1">飛び先-1</a></li>
					<li><a href="#section-2">飛び先-2</a></li>
					<li><a href="#section-3">飛び先-3</a></li>
				</ul>
			</nav>
		</header>
		<div class="space"></div>
		<section id="section-1">
			<h2>飛び先-1</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			</ol>
		</section>
		<section id="section-2">
			<h2>飛び先-2</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			</ol>
		</section>
		<section id="section-3">
			<h2>飛び先-3</h2> 
			<ol>
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 01~05行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 06~10行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 11~15行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 16~20行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 21~25行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 26~30行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 31~35行 -->
				<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li>	<!-- 36~40行 -->
			</ol>
		</section>
	</div>
<!-- ▲▲▲ HTML(ここまで) ▲▲▲ -->
</div>

<!-- ▼▼▼ SCRIPT(ここから) ▼▼▼ -->
<!-- ページ内リンクの制御 -->
<script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script>
$('#page-link li a[href*="#"]').click(function () {
	var elmHash = $(this).attr('href');				/* リンク先のid */
	var pos = $(elmHash).offset().top - 132;		/* リンク先の位置(ヘッダー部を引く) */
	$('body,html').animate({scrollTop: pos}, 800);	/* 800msでスクロール */
	return false;									/* リンク処理は無効 */
});
</script>
<!-- ▲▲▲ SCRIPT(ここまで) ▲▲▲ -->

</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎