jQuery : Smooth Scroll (スムーススクロール) の解説 | 独学 Webプログラミング!

Smooth Scrollの概要

スムーススクロールはページ内のa要素に指定したid属性をターゲットに移動する際に滑らかにスクロール移動することができるように作られたプログラムです。

また、HTML要素のid="idIndexNav"の子要素であるol要素をターゲットに自動でclass="clsIndex"のinnerHTMLを取得してリンクの自動書き出しを行います。

導入手順

1. head要素内に下記のコードを設置します。

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="ここはスムーススクロールのjsファイルのURL"></script>
</head>

※以下body要素内に設置していきます。

2. 目次を設置する場所に下記のコードを設置します。
※ここではh3要素を使っていますが、どの要素でもOKです。

<body>
	<h3 id="idIndex">目次 (INDEX)</h3>

	<nav id="idIndexNav"><ol></ol></nav>

</body>

3.ページの任意の場所に見出し要素を設置します。
class="clsIndex"でクラスを設定しておくのがポイントです。

<body>
	<h3 class ="clsIndex">見出しのタイトル</h3>
</body>

4.任意の場所に目次に戻るリンクを設置します。
href="#idIndex"でhref属性値にIDを設定しておくのが、ポイントです。

<body>
	<a href="#idIndex" rel="nofollow">目次へ</a>
</body>

以上でHTML要素の設置は完了です。あとはサンプルコードにある「jquery + javascript」のコードをページのscript要素内に書くか、外部ファイルに書いてscript要素のsrc属性で参照するか、お好みの方法でスクリプトを実行すれば完了となります。 CSSのコードもサンプルを載せていますので、お好みで変更してください。

目次へ

実機サンプル

ここでは画像を表示していますが、このページ自体がサンプルとなります。

目次へ

サンプルコード

ここではHTML、JQ+JS、CSSのサンプルコードを掲載しておきます。ご使用の環境に合わせてカスタマイズしてください。

HTMLコード

<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="ここはスムーススクロールのjsファイルを指定します。"></script>
</head>
<body>
	<h3 id="idIndex">目次 (INDEX)</h3>
	<nav id="idIndexNav"><ol></ol></nav>
	<h3 class ="clsIndex">Smooth Scrollの概要</h3>
		ここが概要文を記述している部分です。
	<a href="#idIndex" rel="nofollow">目次へ</a>
	<h3 class ="clsIndex">Smooth Scrollの実機サンプル</h3>
		ここがサンプル画像を表示している部分です。
	<a href="#idIndex" rel="nofollow">目次へ</a>
	<h3 class ="clsIndex">Smooth Scrollのサンプルコード</h3>
		ここがサンプルコードを表示している部分です。
	<a href="#idIndex" rel="nofollow">目次へ</a>
	<h4 class ="clsIndex">関連のあるページ</h4>
	<nav>リンクを貼っている部分です。</nav>
	<a href="#idIndex" rel="nofollow">目次へ</a>
</body>

jquery + javascript

<script>
	document.addEventListener("DOMContentLoaded",function(){
		let i;
		let varHIndexCount = $('.clsIndex').length;
		let varLiTags = '';
		for(i=0; i<varHIndexCount; i++){
			document.body.getElementsByClassName("clsIndex").item(i).id='idHIndex'+i;
		};
		for(i=0; i<varHIndexCount; i++){
			varLiTags=varLiTags+'<li id="idAIndex'+i+'"><a href="#idHIndex'+i+'" rel="nofollow">'+$('#idHIndex'+i).html()+'</a></li>'
		}
		$('#idIndexNav ol').html(varLiTags);
		$(function(){
			$('a[href^="#"]').click(function(){
				let speed = 400; /*スクロールの速度(ミリ秒)*/
				let href = $(this).attr("href");
				let target = $(href == "#" || href == "" ? 'html' : href);
				let position = target.offset().top;
				$('body,html').animate({scrollTop:position}, speed, 'swing');
				return false;
			});
		});
	},false);
</script>

CSSコード

#idIndexNav ol{
	border: 1px solid ##black;
	background-color: ##lightcyan;
}

目次へ

Title

ページ内リンクにスムースに移動する