スムーススクロールの実装

こちらの練習サイト内のページで実装してみました。

完成形：https://skblogwp.com/practice/javascript/article_001/

HTML
jQuery

HTML

HTMLでは、目次に各セクションへのリンク先を指定するようにします。

<ol>
                            <li><a href="#self-introduction">自己紹介</a></li>
                            <li><a href="#work-experience">職務経歴</a></li>
                            <li><a href="#qualification">主な保有資格</a></li>
                            <li><a href="#difficulty">困難だった課題</a></li>
                        </ol>

jQuery

$(function () {
    
    //start
    $('a[href^="#"]').on("click", function(event) { //href属性が「#」で始まるリンク（ページ内アンカーリンク）を選択します。
        event.preventDefault(); // デフォルトのリンク動作を無効化
        var target = $($(this).attr("href")); // リンク先の要素を取得

        if (target.length) {
            var position;

            // SP処理
            if (window.matchMedia('(max-width: 959px)').matches) {
                position = target.offset().top; // スクロール先(target)の位置を取得
            } 
            // PC処理
            else if (window.matchMedia('(min-width:960px)').matches) {
                position = target.offset().top - $("header").innerHeight(); // ヘッダーの高さを引いた位置を取得(PCはヘッダーが固定されてスクロールに追従するため。）
            }

            $("html, body").animate({ scrollTop: position }, 500, "swing"); // アニメーションでスクロール
        }
    });
    //finish

});