はじめに
ソニックムーブの安立です。
先日以下のような記事を書きました。
さらにページ内リンクのスムーススクロールもJavascriptを使用せずにCSSのみで行けるようになっていました。
結論
まずは結論ということで、htmlに対して以下のコードを指定しましょう。
・・・簡単！！！！
html {
scroll-behavior: smooth;
}
今回はscroll-behaviorというプロパティですね。
デモ
前回のデモを流用する形で見てみましょう。
スムーススクロールしない（デフォルト状態）デモ
ページ内リンクを押下すると、その瞬間にパキッと飛んでいきますね。
これはこれで潔くて良い！
スムーススクロールするデモ
ページ内リンクを押下すると、スルスル〜〜っとスクロールします。
うーん、簡単。
ちなみにイージングの細かい設定はできずブラウザで決められたものを使うので、スムース具合にこだわりたい人は従来通り（？）Javascriptを使いましょう。
ブラウザ対応状況
scroll-behaviorに関しても基本的なブラウザは全て対応しているようですね。
良いですね。
ちょっとした懸念点
- キーボードのタブでのリンク移動もスムーススクロールしてしまい、場合によっては使い勝手が悪くなる可能性がある。
- ブラウザバックで戻った時に前回のスクロール位置までスムーススクロールする場合がある。
- モーダル表示などでJavascriptで座標をいじってスクロールできなくする処理などを使っていた場合、モーダルを閉じる度にスムーススクロールが発生してしまう。
など、他にもあったりするかもなのですが、要するにhtml要素に対する座標移動のスクロールがすべてスムーススクロールになってしまうのです。
実際に使う時には、そこを意識し把握した上でやりましょう。
スクロールが絡む部分の動作テストは必須です。
まとめ
懸念点はありつつも、ページ内リンクのスムーススクロールを設定したい場合はscroll-behaviorを設定すれば簡単に実装できるようになっています。
やったね!!!
Discussion