クリックしたリンクに応じてページ内を滑らかに移動するスムーススクロール。一昔前までは、これを実装するには JavaScript で実装するしかありませんでしたが、CSS のscroll-behaviorプロパティを使えば簡単に実装できます。

今回は、CSS のみでスムーススクロールを実装する方法と、スクロール位置の調整方法について解説します。また、この方法を使うメリットとデメリットについても紹介します。

CSS のみでスムーススクロールを実装する方法

CSSを使ってスムーススクロールを実装するには、html要素に scroll-behavior: smooth; を指定します。

html {
  scroll-behavior: smooth;
}

これだけで、同じページ内のアンカーリンクをクリックしたときに、滑らかにスクロールするようになります。

スクロール位置の調整

ウェブサイトに固定ヘッダーなどを導入している場合は、ヘッダーによってスクロール位置にあるコンテンツが隠れてしまうことがあります。そういった場合には、scroll-paddingでヘッダーの高さ分、スクロール位置をずらすことができます。

html {
  scroll-behavior: smooth;
  scroll-padding: 80px;
}

これにより、固定ヘッダーがある場合でも、適切な位置にスクロールされるようになります。

CSSでスムーススクロールを実装するメリットとデメリット

非常に簡単に実装することができる CSS によるスムーススクロールですが、メリットもあればデメリットもあります。

CSSによるスムーススクロールのメリット

  • 簡単に実装可能 :
    JavaScriptを使わずに、CSS 数行だけで実装できる。
  • 高速に動作する :
    ブラウザのネイティブ機能を利用するため、パフォーマンスが高い。

CSSによるスムーススクロールのデメリット

  • 全てのページ内リンクが対象になる :
    一括で全てのページ内リンクが対象となるため、個別で無効にしたい場合には別途 JavaScript での対応が必要になる。
  • 細かくカスタマイズできない :
    スクロールの速度や動作を細かく制御できない。

まとめ

CSSのscroll-behavior: smooth;を使えば、簡単にスムーススクロールを実装できます。固定ヘッダーなどがある場合は scroll-margin-top を指定してスクロール位置を調整しましょう。

この方法は、シンプルな実装が求められる場面で特に有効ですが、細かい制御が必要な場合はJavaScriptによる実装を検討すると良いでしょう。

参考