W-Tips

jQueryでスムーススクロールを実装するのは比較的簡単です！
例えば、ページ内リンク（<a href="#section1">のような）をクリックしたときに、対象のセクションへスムーズにスクロールさせる方法です。

以下に基本的な例を紹介します。

実装方法

<!-- HTML -->
<a href="#section1">セクション1へ</a>

<div id="section1" style="margin-top: 1000px;">
  <h2>セクション1</h2>
</div>

$(document).ready(function(){
  $('a[href^="#"]').click(function(){

    const speed = 500; // スクロールの速さ（ミリ秒）
    const href = $(this).attr("href");
    const target = $(href === "#" || href === "" ? 'html' : href);
    const position = target.offset().top;
    $('html, body').animate({scrollTop: position}, speed, 'swing');
  });
});

補足ポイント

• $('a[href^="#"]')：「#」で始まるリンクすべてに適用
• $('html, body').animate()：HTMLとbody両方に指定することで、ブラウザの互換性に対応
• 500：スクロール時間（ミリ秒）
• swing：デフォルトで "swing" と "linear" が使えます

jQueryが読み込まれていないと動かないので注意！

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

以上がjQueryでスムーススクロールを実装する方法です。
必要に応じて、オフセット（ヘッダー分の高さなど）やスクロールイージングもカスタマイズできます！

最後までお読みいただきありがとうございました！