【コピぺOK】jQueryでスムーススクロールを実装する方法

<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

// ドキュメントが読み込まれた後に実行する関数を定義
$(document).ready(function(){
    // ページ内リンク（href属性が"#"で始まるaタグ）がクリックされたときの動作を定義
    $('a[href^="#"]').click(function(){
        // スクロールの速度を400ミリ秒に設定
        var speed = 400; 
        // クリックされたaタグのhref属性の値を取得
        var href= $(this).attr("href");
        // hrefの値が"#"または空文字の場合は'html'を、それ以外はhrefの値をターゲットとして設定
        var target = $(href == "#" || href == "" ? 'html' : href);
        // ターゲットの位置（上からの距離）を取得
        var position = target.offset().top;
        // スクロールアニメーションを実行。スクロール先の位置と速度、動きの種類（'swing'）を指定
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        // aタグのデフォルトの動作（ページ遷移など）をキャンセル
        return false;
    });
});

$(document).ready(function(){
    $('a[href^="#"]').click(function(){
        var speed = 400; // スクロールの速度（ミリ秒）
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        
        // ヘッダーの高さを取得
        var headerHeight = $('.header').outerHeight();
        
        // スクロール先の位置からヘッダーの高さ分だけずらす
        var position = target.offset().top - headerHeight;
        
        $('body,html').animate({scrollTop:position}, speed, 'swing');
        return false;
    });
});

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

    // 他ページからの遷移時のスムーススクロール
    // URLにハッシュ（#）が含まれているかを確認
    if (location.hash) {
        // 微小な遅延（1ミリ秒）を持たせて、以下の関数を実行
        setTimeout(function(){
            // URLのハッシュを元にターゲットの要素を取得
            var target = $(location.hash);
            // ターゲットが存在する場合のみ以下の処理を実行
            if (target.length) {
                // ヘッダーの高さを取得
                var headerHeight = $('header').outerHeight();
                // ターゲットの位置（上からの距離）からヘッダーの高さを引いた位置を取得
                var position = target.offset().top - headerHeight;
                // スクロールアニメーションを実行。スクロール先の位置と速度、動きの種類（'swing'）を指定
                $('body,html').animate({scrollTop:position}, speed, 'swing');
            }
        }, 1);
    }
});