CSSのscroll-behaviorのsmoothでページ内のスクロールイベントにゆっくり遅らせるアニメーションを付ける

今までブログに目次のジャンプリンクやフローティングの戻るボタンを設置して来た。HTMLのリンクタグのaを使ってページ内のidを持たせた場所へ移動するように作成しているけど、ところが何もしないままのデザインだと一瞬で、目的地に着いてしまって周りが文字だらけならばそれこそ雰囲気が殆ど変わらないために自分はどこにいるのか、リンクを使ってページ内を本当に移動したのかどうかが分かり兼ねる。

少しでも混乱しないために、または折角と設置したはずの目次のジャンプリンクやフローティングの戻るボタンを気持ち良く使うというサイトのUX（User Experience／利用者の体験）を向上させるべく、ページ内を移動するスクロールイベントにゆっくり遅らせるアニメーションを付けるようにデザインを相応しく変えると良いと思う。

CSSのscroll-behaviorのsmoothの使い方

サイトのスクロールイベントの経過時間を遅らせてゆっくりのアニメーションのデザインを付けられるのがCSSのscroll-behaviorという要素なんだ。

二つの値を取る。デフォルトで何もなく、一瞬で、スクロールするのが「auto」で、ゆっくり遅らせるアニメーションでスクロールするのが「smooth」になる。他にはデザインと関係ないけれどもCSSのマークアップで後から値を初期化する場合の「initial」や値を引き継ぐ場合の「inherit」や値を引き継ぐかさもなければ初期化する「unset」も使える。

ブログでも取り入れたけれどもサイト全体にscroll-behaviorをかける場合はhtmlタグに指定するのが最も簡単な方法になる。

html {scroll-behavior:smooth;}

サンプルのリンク：押すとCSSのscroll-behaviorのsmoothのゆっくり遅らせるアニメーションと共にヘッダーのブログ名：些細な日常へ移動する（ブラウザかデバイスのバックボタンで戻れる）

CSSのscroll-behaviorはリンク先のidを含む領域タグのdivなどのボックスに指定する。

サイトの一部で使う場合はCSSのheightとoveflowのscrollなどで作成した特定のスクロールボックスに指定しないと動かない。

サンプルのスクロールボックス

上

中

下

上中下

HTML

<div class="scroll-container">
<div class="scroll-box">
<p id="page-top">上</p>
<p id="page-middle">中</p>
<p id="page-bottom">下</p>
</div>
<div class="scroll-switch">
<a href="#page-top">上</a><a href="#page-middle">中</a><a href="#page-bottom">下</a>
</div>
</div>

CSS

.scroll-container {display:grid;grid-template-columns:10fr 1fr;justify-content:center;align-items:center;}
.scroll-switch {border:#4682b4 1px solid;padding:6px;justify-self:center;display:flex;flex-direction:column;}
.scroll-box {height:300px;overflow:scroll;scroll-behavior:smooth;font-size:5em;color:#fffaf0;background:#ff00ff;}
.scroll-box p {display:flex;justify-content:center;align-items:center;height:100%;}

現時点、scroll-behaviorはブラウザの実装状況が甚だ限られていてCan I use CSSOM Scroll-behavior?（CSSOM Scroll-behaviorは使えるか）によるとChrome61以降、Firefox36以降、Opera48以降で反映する。他の主要なブラウザとしてEdgeやSafariでも反映するようにならないと誰でも気軽に使うのは厳しいかも知れない。

• CSSだけでも実装できる！ページ内アンカーやページ上部にアニメーションでスクロールさせるCSS, JavaScriptのまとめ
• CSS, jQuery, JavaScript による Smooth Scrolling の実装例と Easing に関するまとめ

ブラウザに対応させるPolyfillや他にもJavaScript／jQueryを使った方法があるから必要に応じて導入できる。

通常、スクロールで移動した後は画面／スクロールボックスの上部にリンク先がくっ付いて表示されてしまう。引き離すにはscroll-behaviorのリンク先のidにCSSのscroll-marginやscroll-paddingを指定すると良いと思う。外側や内側の余白をリンク先の上に付けておくとスクロールで移動した後にリンク先を画面／スクロールボックスの上部と引き離せる。

余白の向きを個別に指定するにはscroll-margin-topやscroll-padding-topを記載すると上にかかる。

サンプルのソースコード

リンク先を見出しのh2タグとしてジャンプ後に上にscroll-margin-topで二文字の外側の余白を付ける。

CSS

h2 {scroll-margin-top:2em;}

scroll-behaviorはサイトのデザインに大きな影響を与えるわけではないからブラウザの実装状況は幾らか低くても僕は使ってしまうけど、しかしもっと普及するのを期待せずにはいられない便利なCSS要素だと感じる。

関連ページ

• Imaginary theme｜Bloggerの日本語テーマ／テンプレートの提供

参考サイト

• CSS「scroll-behavior」だけでアンカースクロールを実装する方法。