たった１行！CSSでスクロールをスムーズにする方法

今回は「ページトップへ戻る」などのページ内リンクの動きをぬるっとスムーズにさせるCSSのご紹介。

ご紹介といっても本当に１行で終わっちゃいます。

WEBサイトを制作するときにできるだけJavaScriptを使いたくない！
簡単に動きがつけられてシンプルな方法がいい！というかた必見です。

ページ内リンクの動きをなめらかにするCSS
スクロールをスムーズにさせるCSSの注意点
1. 対応ブラウザが限定される
2. 同じhtml上にあるスクロールがすべてスムーズに
シンプルにコーディングしたい人には最適

ページ内リンクの動きをなめらかにするCSS

html {
  scroll-behavior:smooth;
}

以上です。

スクロールをなめらかな動きにしたいページのhtml要素に scroll-behavior:smooth; を入れるだけ！

スクロールをスムーズにさせるCSSの注意点

対応ブラウザが限定される

scroll-behavior:smooth; をつかう注意点としては、対応ブラウザが限定されているところです。

現時点では、「IE11」「Edge」「Safari」には対応していません。

iPhone大国の日本ではちょっとツライかもしれませんね。モバイル中心のサイトで使う場合は注意が必要です。

「Chrome」「Firefox」は対応済みとなっています。AndroidもOKです。

同じhtml上にあるスクロールがすべてスムーズに

もう一つの注意点は scroll-behavior:smooth; を追加した同じhtml上にあるページ内リンクの移動が、すべてぬるっとなめらかになってしまうこと。

スクロールの動きを統一したい場合はそのままで問題ありませんが、別のアクションを適用させたいときはやはりJavaScriptなどに頼るしかないでしょう。