CSSでページ内リンクをスムーズにスクロールさせる方法

ハシビィくん

ページ内リンクを設置したんすけど、パッと変わりすぎてリンク先に移動したか分かりにくいっす。ページ内遷移されていることを分かりやすく表現したいっす。

カピーさん

それならスムーススクロールを使えば解消できるぞ！

通常のページ内リンクは、クリックした瞬間にパッと移動してしまいます。

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

通常の瞬時にリンク先に移動してしまうと、操作側としては同じページなのかというのか分かりにくいケースがあります。

それを解消するためにスムーズスクロールがあります。スムーズスクロールによってなめらかにページ内で移動することで、同じページ内での項目に移動していることが理解してもらいやすくなります。

CSSでスムーズスクロールを実装

スタイルシート（style.cssなど）に以下の記述を適応することで実装が可能になります。

.class { 
scroll-behavior: smooth;
}

遷移イメージのスムーズスクロール

scroll-behavior自体は同じページ内に留まらず、他のページからの遷移かつ指定の箇所まで移動する時にも機能します。

ただ注意点としては、JavaScriptでの実装とは違って、スクロールスピードを調整したり、到達位置の微調整などの細かい調整ができないというデメリットもありますが、LPなどでシンプルに実装したいのなら、利用する機会もあるかとも思います。

JavaScriptでスムーズスクロールを実装

JavaScriptで実装する際のベースコードを解説込みのものが以下になります。

$(function () {
  // ページ内リンクのスクロール動作
  $('a[href^="#"]').click(function () {
    var speed = 500; // スクロール速度 (ミリ秒)
    var href = $(this).attr("href"); // クリックされたリンクのhrefを取得
    var target = $(href === "#" || href === "" ? 'html' : href); // 移動先の要素を取得
    var position = target.offset().top; // 移動先の要素の位置を取得
    $('html, body').animate(
      { scrollTop: position }, // スクロール位置を設定
      speed, // スクロール速度
      'swing' // スクロールの動きを設定
    );
    return false; // デフォルトのリンク動作を無効化
  });
});

元の項目に戻る遷移リンクです。（こちらをクリックで戻ります）

まとめ：CSSでページ内リンクをスムーズにスクロールさせる方法

ページ内リンクでの遷移挙動で瞬時に切り替わってしまうと、案外自分が今見ているページがどこなのかと迷子になってしまうというユーザーは案外います。

スムーズスクロールによって不要な誤解を解消できるので、多くのサイトで採用されている機能なので、ぜひ覚えておいてください。