ページ内リンクをスムーズスクロール

bodyタグ終了直前に記述

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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

最初の、「$(function(){」を使ってjQueryの無名関数であることを宣言します。

a要素のhref=”#”をクリックしたときの処理を実装するために、「$(‘a[href^=”#”]’).click(function(){」と記述し、以降に処理の中身を書いていきましょう。

varは、JavaScriptで変数を宣言する際に使います。

スクロールの速さをspeedに代入しておきます。

「$(this).attr(“href”)」では、a要素のhref属性の値を取得しており、これをhrefに代入します。

「$(href == “#” || href == “” ? ‘html’ : href」は、条件(三項)演算子で、href属性の値が「#」と同じであるか、空である場合にhtmlを代入します。

そうでない場合には、変数hrefを代入します。

「target.offset().top」では、画面上部からtargetまで距離を取得します。

最後に「$(“html, body”).animate({scrollTop:position}, speed, “swing”);」を使って、positionの位置まで、speedの速度（ミリ秒）でHTML全体をアニメーション表示でスクロールさせます。

swingは、スクロールする際の挙動の指定です。

最初と最後は緩やかで、途中は速めに移動します。ここをlinearと指定すると、常に一定の速さになりますよ。

固定ヘッダーに隠れてしまうのを防ぐ方法

スクロールに追従している固定ヘッダーがある場合、リンク先の要素の上部がヘッダーに隠れてしまいます。

これを防ぐために、スクロールの位置を調整する方法を紹介しましょう。

スクロールした際の移動先を、固定ヘッダーの高さだけ下にずらすとちょうど良く表示されます。

//ヘッダーの高さを取得
var header = $('header').height();
//ヘッダーの高さを引く
var position = target.offset().top - header;

「$(‘header’).height()」で、ヘッダーの高さを取得し、headerに代入します。

元々の移動先から、ヘッダーの高さ分だけ引いてpositionに代入します。

こうすることで、固定ヘッダーに隠れないスムーズスクロールができるようになりました。

上記以外の部分のコードはそのままです。

ページ内リンクをスムーズスクロール

固定ヘッダーに隠れてしまうのを防ぐ方法

関連記事