スムーズにスクロールする処理をjQueryで実装

そもそもjQueryが使用されるケースが最近はあまりないかと思います、、（Reactとかで開発が主流）

それでもjQueryと関わることが多いと思うのが、WordPress改修案件です。

Gutenbergブロック開発にはReact一択かと思いますが、古いWordPressテーマ / プラグイン製品については今でも jQuery 使ってることが多いです！

ということで、WordPressでの実装を前提にまとめていきます

ソースコード

▼ jsファイルの読み込みについてはfunctions.phpで

<?php
/**
 * カスタムJavaScriptの読み込み
 */
function enqueue_custom_scripts()
{
    // スムーススクロール用JS
    wp_enqueue_script(
        'smooth-scroll',
        get_template_directory_uri() . '/assets/js/smooth-scroll.js',
        array('jquery'), // WordPressのデフォルトの同梱されているjQueryを依存関係に追加
        _S_VERSION,
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_custom_scripts');

▼ スムーススクロールを実装

(function($) {
    let headerHeight = $('.site-header').height();
    console.log('headerHeight', headerHeight);

    $('a[href^="#"]').click(function() {
        var speed = 500;
        // アンカーの位置を取得
        var href = $(this).attr('href');
        // 移動先の要素を取得
        var target = $(href == "#" || href == "" ? 'html' : href);
        // 移動先を数値で取得
        var position = target.offset().top - headerHeight;

        $('html, body').animate({
            scrollTop: position
        }, speed, 'swing');
        return false;
    });

    $(".js-scroll-to-form").click(function() {
        $("html, body").animate({
            scrollTop: $("#contact").offset().top - headerHeight
        }, 500, 'swing');
        return false;
    });
})(jQuery);

他の$（WordPressとかライブラリ）と衝突しないように

jQuery自身でjQuery のエイリアスを$としている仕様から、$を使用しているのですが、そのまま使用すると、グローバルスコープの $（他ライブラリなど）とは衝突してしまいます

そこで下記のような書き方をします

(function($) { /* jQueryコード */ })(jQuery);

上記を分解してせつめいすると

① function($) { … }
→ 関数を定義してる
※引数の名前は $ にしてる

② (function($) { … })
→ この関数を かっこで囲んで、式にしてる
JavaScriptでは関数定義そのままだと「文（ステートメント）」と見なされて、すぐ実行できないから、かっこで囲って「関数式」に変えてます

③ (function($) { … })(jQuery)
→ 最後の (jQuery) は、関数を即時実行する時の引数！

(function($) {
/* この中ではjQueryを $ として使える！ */
})(jQuery);

animate() とは？

jQueryオブジェクトのスタイルを、アニメーションしながら変化させるメソッド

$(セレクタ).animate({
  プロパティ: 値,
  ...
}, 時間, イージング, コールバック);

scrollTop（スクロールトップ）

引数の位置までスクロール（引数なければ今のスクロール位置を取得）

offset()（オフセット）

ある要素がページの左上からどの位置にあるか（絶対位置）