スムーススクロールのシンプルな記述方法

スムーススクロールとは？

スムーススクロール（Smooth Scroll）とは、ページ内リンクやナビゲーションをクリックした際に、画面が急に移動するのではなく、なめらかにスクロールして移動する効果のことです。 通常のスクロールでは、リンクをクリックすると即座に目的の位置にジャンプしますが、スムーススクロールでは自然な流れで目的の位置までスクロールして見せるため、ユーザーにとってより視覚的にわかりやすく、快適かつ少しリッチな体験を提供できます。

jQueryを使った実装方法

これまでスムーススクロールの実装を何度か重ねてみて、以下の記述方法に辿り着いたので備忘録として残します。 もっとシンプルで可読性の高い記述方法があれば教えていただけると嬉しいです！ スムーススクロールの挙動に対して、CSSの記述は不要です。

<a href="#menu1"></a>
<a href="#menu2"></a>
<a href="#menu3"></a>
<section id="menu1"></section>
<section id="menu2"></section>
<section id="menu3"></section>

aタグのリンクを押下したら、sectionタグ要素の先頭まで滑らかな動きで移動することを期待した記述です。

  $(function () {
    $('a[href^="#"]').click(function (e) {
      e.preventDefault(); // デフォルトの動作をキャンセル
      var speed = 500; // スクロールのスピード
      var href = $(this).attr('href'); // クリックされたリンクのhrefを取得
      var target = $(href); // ターゲットとなる要素を取得
      if (target.length) { // ターゲットが存在する場合のみ実行
        var position = target.offset().top; // ターゲットの位置を取得
        $('html, body').animate({ scrollTop: position }, speed, 'swing'); // スムーズスクロール
      }
    });
  });

• e.preventDefault(); で、リンクがクリックされたときのデフォルト動作（即時ジャンプ）を防いでいます
• $('html, body') で、ブラウザ互換性のためにスクロール処理を html と body の両方に対して行っています
• var target = $(href); で、href が指す要素を選択し、存在する場合にのみスクロールを実行しています

注意点

以下、ご注意ください。

• href属性の値が"#"のみを指定している場合は、動きません
• 外部ページから、アンカーリンクが付いたURLにアクセスした場合は、スムーススクロールは機能しません

初心者の方へ

jQueryの読み込みをお忘れなく！

24/10/8時点の最新jQueryのバージョンは 3.7.1 です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

body閉じタグの直前に読み込みます。

素のjsでの実装方法

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
      e.preventDefault();
      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop,
          behavior: 'smooth'
        });
      }
    });
  });