home > blog > javascript > 【jQuery】ページ内リンクでスムーズスクロール

【jQuery】ページ内リンクでスムーズスクロール

DEMOはこちら

手順はこちら

① jQueryを読み込む（必須）

jQueryを使うので読み込みを忘れずに。
</footer>の直後とかで良いと思います。

<script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

② jQueryを記述していく

$(function(){
	$("a[href^='#']").click(function(){
		var speed = 600;
		var adjust = 130;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top  - adjust;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

コードの解説

▼ クリックしたら解説が表示されます。

$(function () {
jQueryの開始時に記述するもの。
$(function() { /*ここに処理を記述*/ });
　$(“a[href^=’#’]”).click(function(){
これは「＃から始まるアンカータグをクリックしたら、処理を実行する」という意味。
　　var speed = 600;
これはスクロールする速さを調節するコード
　　var adjust = 130;
スクロール先の位置を調整する。
この場合、130px上にずらしています。
　　var href= $(this).attr(“href”);
クリックしたジャンプ先を取得するコード。
　　var target = $(href == “#” || href == “” ? ‘html’ : href);
「href == “#”」
→ 変数hrefの値が”#”

「||」
→ もしくは

「href == “”」
→ 変数hrefの値が空だったら

「？」
→ であれば

「’html’」
→ 「$(‘html’)」へのリンク。（ページトップに戻る）
　　var position = target.offset().top – adjust;
「offset」でリンク先（target）のtop位置を取得。
取得した数値からadjust分（130）を引き算。
引き算した値を変数positionに代入する。
（引き算しないとヘッダーがタイトルに被って見にくいため。）
必要に応じて、130の箇所は変えてください。

※ offset()は表示位置を取得するメソッド。
　　$(“html, body”).animate({scrollTop:position}, speed, “swing”);
animateは、指定したプロパティ（ここではhtml, body）を目的地まで動かすメソッド。

{scrollTop:position}で、positionまでスクロールさせます。

変数「speed」は「600」が代入されています。

「”swing”」は、始めはゆっくり加速して動き、最後はゆっくりと止まります。
　　return false;
「return false;」を記述することで、URLにIDが入るのを防ぎます。
　});
});

③ HTMLにIDを記述する

スムーススクロールの到着位置にIDをつけてあげてください。

RETURN
top