今回は「ページトップへ戻る」などのページ内リンクの動きをぬるっとスムーズにさせるCSSのご紹介。
ご紹介といっても本当に1行で終わっちゃいます。
WEBサイトを制作するときにできるだけJavaScriptを使いたくない!
簡単に動きがつけられてシンプルな方法がいい!というかた必見です。
ページ内リンクの動きをなめらかにする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などに頼るしかないでしょう。
シンプルにコーディングしたい人には最適
少し不便なところもありますが、ページ内リンクのぬるっとした動きがCSS1行だけで追加できるのはコーディングする立場からするととても便利。
「シンプルなコーディングでWEBサイトを作りたい」「JavaScriptもjQueryもちょっと苦手…」という人は是非試してみてください。