トップへ戻るボタンの動きが遅い！CSSとJavaScriptの干渉を解決する方法

「トップへ戻る」ボタンをクリックしたとき、スムーススクロールの動きが遅いと感じたことはありませんか？
その原因の多くは、CSSのscroll-behavior: smooth;とJavaScript（特にjQuery）を使ったスムーススクロールが干渉していることにあります。

この記事では、この問題の原因を解説し、CSSを削除してJavaScriptでスムーススクロールを実現する方法を紹介します。

問題の原因: CSSとJavaScriptの干渉

CSSのscroll-behavior: smooth;とJavaScriptのスムーススクロールは、どちらもスクロール動作を制御します。しかし、これらが同時に動作すると、ブラウザで処理が重複し、スクロール動作が遅くなる、または不安定になることがあります。

解決策: CSSを削除してJavaScriptを利用する

問題を解決するには、CSSのscroll-behavior: smooth;を削除し、JavaScriptでスムーススクロールを実装します。以下の手順に従って設定を行いましょう。

1. CSSからscroll-behavior: smooth;を削除する

まず、以下のように指定されているCSSコードを削除します。

html {
  scroll-behavior: smooth;
}

2. JavaScriptでスムーススクロールを実装する

次に、JavaScriptでスムーススクロールを設定します。以下のコードを追加してください。

$(document).ready(function () {
  // ページ読み込み時、URLにハッシュがある場合の処理
  if (window.location.hash) {
    var target = $(window.location.hash); // URLのハッシュをターゲットとして取得
    if (target.length) {
      $('html, body').animate(
        { scrollTop: target.offset().top },
        300, // スクロール時間
        'swing' // イージング
      );
    }
  }

  // 通常のクリック時のスムーススクロール
  $('a[href^="#"]').on('click', function (e) {
    var targetId = $(this).attr('href');
    var target = $(targetId);

    if (target.length) {
      e.preventDefault(); // デフォルトのリンク動作を無効化
      $('html, body').animate(
        { scrollTop: target.offset().top },
        300, // スクロール時間
        'swing' // イージング
      );
    }
  });
});

コードのポイント

1. ページ読み込み時の処理
   URLにハッシュ（例: #section）が含まれている場合、該当セクションまでスムーススクロールします。
2. アンカーリンクのクリック時
   アンカーリンク（例: <a href="#section">）をクリックした際に、ターゲット要素までスムーススクロールを実行します。

まとめ

CSSとJavaScriptのスムーススクロールが干渉することで、スクロールの動きが遅くなることがあります。この問題を解決するには、CSSのscroll-behavior: smooth;を削除し、JavaScriptでスムーススクロールを実装するのが効果的です。

これで「トップへ戻る」ボタンやアンカーリンクのスクロール動作がスムーズになり、ユーザー体験を向上させることができます。