[CSS] scroll-behavior: smoothでページトップボタンをスムーススクロールさせる方法

Webサイトでは、ページ下部までスクロールしたユーザーが簡単に先頭へ戻れるよう、「ページトップボタン」を設置することがあります。

この記事では、CSSの「scroll-behavior: smooth;」を利用して、JavaScriptを使用せずにページトップボタンをなめらかスクロール対応にする方法と、固定ヘッダーを使用している場合の調整方法、実装時の注意点について解説します。

CSSのみでページトップボタンを実装する方法

基本コード

HTML

CSS

scroll-behavior: smooth; を指定すると、アンカーリンクによるページ移動時にスクロールアニメーションが適用されます。
そのため、ページトップボタンだけでなく、ページ内リンク全体になめらかなスクロールが適用されます。

DEMO

CSSのみでページトップボタンを実装する方法

scroll-behavior: smooth; とは

scroll-behavior は、アンカーリンクなどによるスクロール時の挙動を指定する CSS プロパティです。

通常、アンカーリンクをクリックすると瞬時に移動しますが、smooth を指定するとスクロールアニメーション付きで移動します。

ページトップボタンだけでなく、目次リンクやページ内リンクにも利用できます。

固定ヘッダーでスクロール位置がずれる場合の対処方法

ヘッダーを position: fixed で画面上部に固定している場合、スクロール先がヘッダーの裏に隠れてしまうことがあります。

固定ヘッダーでスクロール先が隠れてしまうデモ

その場合は scroll-padding-top を指定して、スクロール時の余白を確保します。

例えばヘッダーの高さが80pxの場合、スクロール位置を80px下げた状態で停止するため、コンテンツがヘッダーに隠れなくなります。

値は実際のヘッダー高さに合わせて調整してください。

固定ヘッダーで scroll-padding-top を指定したデモ

scroll-behavior: smooth; を使用する際の注意点

ページ内リンク全体に適用される

scroll-behavior: smooth; は、ページトップボタンだけに適用されるわけではありません。
ページ内アンカーリンク全体に対してスムーススクロールが適用されるため、目次リンクやナビゲーション内のアンカーリンクなども同様の挙動になります。
そのため、特定のリンクだけにスムーススクロールを適用したい場合には、JavaScriptによる実装を検討してください。

JavaScript製プラグインと干渉する場合がある

scroll-behavior: smooth; は通常 html 要素に指定します。
そのため、サイト全体のスクロール処理に影響を与える可能性があり、JavaScript製のプラグインやライブラリと組み合わせた際に、意図しない挙動が発生する場合があります。

例えば、以下のような機能を実装している場合は注意が必要です。
・スムーススクロール系ライブラリ
・スクロールアニメーションライブラリ
・スクロール位置を利用したJavaScript

スクロール位置の計算やスクロールイベントを利用している処理では影響を受けることがあります。
導入後は、使用しているプラグインやJavaScriptとの組み合わせで問題が発生しないか確認することをおすすめします。
特にWordPressテーマやプラグイン側で独自のスムーススクロール機能を実装している場合、二重にアニメーションが実行されることで不自然な動きになることがあります。

アニメーションを減らす設定への配慮

OSで「視差効果を減らす」などの設定を行っているユーザーもいます。
その場合は prefers-reduced-motion を利用してスムーススクロールを無効化することも検討しましょう。

ブラウザ対応

現在の主要ブラウザでは対応していますが、一部の古いブラウザや特殊な環境では利用できない場合があります。

細かな制御をしたい場合はJavaScriptを使用する

CSSだけで実装できる反面、スクロール速度や表示タイミングなどを細かく制御することはできません。

例えば以下のような機能を実装したい場合はJavaScriptを使用します。

• 一定位置までスクロールしたら表示する
• フェードイン・フェードアウトさせる
• スクロール速度を調整する
• イージング（加速・減速）を変更する
• スマートフォンとPCで挙動を変える

シンプルなページトップボタンであればCSSのみ、細かな演出が必要な場合はJavaScriptを選択するとよいでしょう。

まとめ

scroll-behavior: smooth; を利用すると、JavaScriptを使用しなくてもページトップボタンやページ内リンクにスムーススクロールを適用できます。

固定ヘッダーを使用している場合は scroll-padding-top を併用し、必要に応じてブラウザ対応やアクセシビリティにも配慮しましょう。

細かな演出や表示制御が必要な場合は JavaScript を利用することで柔軟な実装が可能です。