【jQuery】ページ内リンクをスムースにスクロールさせる方法

目次

今回は、下の画像のように、クリックするとゆっくりページがスクロールするページ内リンクを紹介していきます。

参考までに、HTMLだけでページ内リンクを作る方法については、以下の記事で解説しています。

【HTML】ページ内リンクを導入しよう

サンプルコード

<ul id="scroll-btn">
	<li><a href="#content1">リンク1</a></li>
	<li><a href="#content2">リンク2</a></li>
	<li><a href="#content3">リンク3</a></li>
	<li><a href="#content4">リンク4</a></li>
	<li><a href="#content5">リンク5</a></li>
</ul>

<div id="content1">
	<h2>コンテンツ1</h2>
</div>
		
<div id="content2">
	<h2>コンテンツ2</h2>
</div>

<div id="content3">
	<h2>コンテンツ3</h2>
</div>

<div id="content4">
	<h2>コンテンツ4</h2>
</div>

<div id="content5">
	<h2>コンテンツ5</h2>
</div>
$("#scroll-btn a").click(function() {
	var attr = $(this).attr("href"); //クリックしたリンクのhref属性の値を代入
	var position = $(attr).offset().top; //対応するコンテンツのページ上端からの距離を代入
	$("html, body").animate({
		"scrollTop": position
	}, 500); //スクロール速度
	return false;
});

この例では、リンクの数に関係なく機能するようになっているので、リンクとコンテンツの数が変わっても、jQueryのコードを変える必要はありません。

animateメソッドの中の数値はスクロールする速度を表していて、この例では0.5秒(500ミリ秒)でスクロールするようにしています。大きくすれば動きが遅くなり、小さくすれば素早く動くので、ちょうどいい速度になるよう調整してみてください。