コンテンツの充実したサイトなどでよく見かけるトップへ戻るボタンやリンクをクリック、またはタップするとスルスルっとスクロールして戻る、みたいな実装をCSSだけで行うことができますので、今回はこれをご紹介したいと思います。

scroll-behavior: smooth;

以前はJavascriptやjQueryを使って実装していたスムーススクロールも、今やCSSだけで実装することが可能です。

html {
    scroll-behavior: smooth;
}

html要素にscroll-behavior: smooth;を指定するだけ、たったのこれだけです。たったこれだけのコードでサイト内リンクがスムーススクロールになります。便利ですね。

ただし、iPhoneなどで視差効果を減らす設定にしているユーザーにとっては必要ない機能なので、そういったユーザーにはスムーススクロールを適用させないために、

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

このように指定すると、視差効果を減らす設定をしていない場合だけにスムーススクロールが適用されるようになります。

あとは、サイト内の戻りたい箇所、例えばページのトップに戻りたい場合などは、

<h1 id="top">サイトタイトル</h1>

サイトタイトルのh1要素にid="top"という風にid属性を指定し、

<a href="#top">トップへ戻る</a>

とすれば、このリンクをクリックするとサイトタイトルまでスルスルっと戻ってくれます。実際の動きについては、当ブログのフッターに実装していますので参考にしてください。

上マージンの設定

以上の設定でスムーススクロールは実装されますが、上の例だとサイトタイトルのギリギリまでしか戻ってくれません。戻った時に、戻った箇所の少し上、つまりサイトタイトルの上に少し余白が欲しいですよね。これもCSSだけで実装ができます。

[id] {
    scroll-margin-block-start: 10svh;
}

margin-block-startというのは論理プロパティと言われるもので、以前はmargin-topのように文字通り上＝topをそのまま指定していましたが、これも今や変化していてブロック方向のスタートという感じで指定するようになりました。縦書きとか文書方向への対応ですね。

CSS 論理的プロパティと値 - CSS: カスケーディングスタイルシート | MDN

CSS 論理的プロパティと値 (CSS logical properties and values) モジュールは、物理的ではなく論理的に方向や寸法を対応付けて、レイアウトを制御することができるようにします。論理的プロパティは、対応する物理的プロパティに対する書字方向に関連した同等のものを定義します。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_logical_properties_and_values

詳しくはこちらのサイトをご参照ください。

というわけで、スムーススクロール後の上マージンを設定することができました。これで、スムーススクロール先の対象要素から、上の例では10svhの余白を取ったところまで戻ってくれます。

最後に

スムーススクロールをCSSだけで実装できるのはとても手軽で記述量も少なくて済みますので重宝しますが、以下のように問題点もあるようなので実装には注意が必要かと思います。世の中のすべてにおいて、メリットがあれば必ずデメリットも存在するものですね。それらをしっかりと理解した上で実装すべきかは考えた方が良いかと思います。

スムーススクロールの実装例 – TAKLOG

スムーススクロールの実装メモです。現在ではCSSのみでスムーススクロールの実装はできますが、当ブログではそれを使用せずにJSで実装を行っています。

https://www.tak-dcxi.com/article/smooth-scroll-implementation-example/