スムーススクロール実装方法【3選】比較してみた

悩んでいる人

・スムーススクロールの実装方法を知りたい。

・色んな実装方法があるがどれが良いのか知りたい。

・そもそもスムーススクロールとは何か知りたい。

こんな疑問や悩みに答えます。

スムーススクロールの実装方法は、CSS、jQuery、JavaScriptの3つの実装方法があります。

今回は、それぞれ3つの実装方法を紹介し、どの実装が一番良いのかをまとめてみました。

この記事の内容

スムーススクロールとは
スムーススクロール実装方法３選
実装比較(メリット、デメリット)

とらまる

このブログ「とらまるブログ」の運営者。2019年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログ情報発信を行っている。これまでのWeb制作実績は60件以上。

スムーススクロールとは
1. ページ内リンクの実装方法(スムーススクロールなし)
スムーススクロール実装３選
実装比較
まとめ

スムーススクロールとは

スムーススクロールとは、ボタンや目次などをクリックした際、同じページ内の別の位置に移動するときに、滑らかな挙動でスクロールさせる実装方法のことです。

以下にデモの実装を用意しました。上部のセクションボタンをそれぞれクリックすると、滑らかにそれぞれのセクションにスクロールすることを確認してみてください。

See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.

ページ内リンクの実装方法(スムーススクロールなし)

スムーススクロールなしの場合の挙動は以下になります。

ボタンを押すと、遷移先に瞬時に飛びます。

See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.

スムーススクロールの実装の前に、ページ内リンクの実装をどのように行うか説明しておこうと思います。

遷移させてたいタグにidを付与し、aタグのhrefで# + id名とすることで、遷移先に飛ばすことができます。

以下がhtmlでの実装手順になります。

実装手順

遷移させたい箇所に、idを付与する。
リンクボタンを作成し、hrefに「# + id名」を入れる。

<ul>
  <li><a href="#sec1">セクション1</a></li>
  <li><a href="#sec2">セクション2</a></li>
  <li><a href="#sec3">セクション3</a></li>
</ul>
<section class="sec1" id="sec1">
  セクション1
</section>
<section  class="sec2" id="sec2">
  セクション2
</section>
<section class="sec3" id="sec3">
  セクション3
</section>

スムーススクロール実装３選

では、ここからスムーススクロールの実装方法について３つ紹介していきたいと思います。

デモがありますので、それぞれコピペで自由にカスタマイズしてください。

CSSの実装方法

実装方法の中で一番簡単なのは、CSSで実装する方法です。

以下デモになります。

See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.

コード記述は、CSSファイルに以下を記述で完了です！

html {
  scroll-behavior: smooth;
}

jQueryの実装方法

次にjQueryの実装方法になります。

以下デモになります。

See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.

コード記述は、以下になります。

HTMLは、jQuery読み込む必要があるので</body>の前に以下をコピペをしてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

JavaScriptファイルの記述は、以下になります。

jQueryでの実装は、スクロールスピードの調整をspeed変数で行えます。

$(function(){

  $('a[href^="#"]').click(function(){
    var adjust = 0;
    var speed = 400;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top + adjust;
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

JavaScriptの実装方法

最後にJavaScriptでの実装方法になります。

以下デモになります。

See the Pen Untitled by 森寅治 (@moritoraji) on CodePen.

JavaScriptファイルの記述は、以下になります。

jQueryのようなスピード調整はできません。
スピード調整をするには、ライブラリ使用すれば簡単にできると思います。

// ページ内スクール
const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
  for (let i = 0; i < smoothScrollTrigger.length; i++){
    smoothScrollTrigger[i].addEventListener('click', (e) => {
      e.preventDefault();
      let href = smoothScrollTrigger[i].getAttribute('href');
      let targetElement = document.getElementById(href.replace('#', ''));
      const rect = targetElement.getBoundingClientRect().top;
      const offset = window.pageYOffset;
      const width = window.outerWidth;
      const target = (rect) + offset;
      const targetSp = (rect) + offset;

      if (width <= 768) {
        window.scrollTo({
          top: targetSp,
          behavior: 'smooth',
        });
      } else {
        window.scrollTo({
          top: target,
          behavior: 'smooth',
        });
      }
    });
  }