スキップしてメイン コンテンツに移動

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

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

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

cssscroll-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でも反映するようにならないと誰でも気軽に使うのは厳しいかも知れない。

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

scroll-behaviorはhtmlタグに一行を追加しただけで、ページ内の全てのリンクのスクロールイベントにゆっくり遅らせるアニメーションを付けられるのが物凄く便利だと思う。サイトのデザインに大きな影響を与えるわけではないからブラウザの実装状況は幾らか低くても僕は使ってしまうけど、しかしもっと普及するのを期待せずにはいられないcss属性だ。

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

コメント

些細な日常の人気の投稿

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策

Imgurで画像URLと埋め込みコードを取得する方法

Google日本語入力のキーボードで全角の英数字を打ち込む方法

Androidスマホのhtml編集の無料アプリ:WebMaster's HTML Editor Liteのレビューと使い方

スノーボードのジャンプ中のグラブには幾つもの種類がある