コーディング

【超簡単】CSSでスムーススクロールを実装する!

  • このエントリーをはてなブックマークに追加
【超簡単】CSSでスムーススクロールを実装する!

こんにちは、ワタナベです!

だんだんと暖かくなってきましたね…!ちょっと暑いくらいです(;^ω^)

今日はcssでスムーススクロールを実装する方法をご紹介!

ページ内リンクをクリックした時、スーっと移動してくれる動作は大体jsで実装しますが、なんとcssでも実装ができてしまうのです!

scroll-behavior

html{
scroll-behavior: smooth;
}

はい、たったの1行で実装完了です。
これでページ内リンクをクリックした時、スーっと指定の位置まで移動してくれます(^O^)

(htmlに設定することで全体がスムーススクロールになりますが、スムーススクロールさせたい要素だけに設定すればその部分だけスムーススクロールにすることができます。)

対応ブラウザ

非常に便利!ですが、こちらはIE、Safari、Operaでは対応されていません(´;ω;`)ウゥゥ
非対応ブラウザでは従来通りjsで対応することになりそうです。

Data on support for the css-scroll-behavior feature across the major browsers from caniuse.com

Safariが非対応なのはつらいですね…!今後対応されると良いのですが…!

また、このCSSは細かい調整などは行えず、あくまでスムーススクロールが出来るだけのcssとなっているので、

アニメーションや、遷移先の位置を細かく設定したい場合などはjsを使うのが良いでしょう。

これからどんどん色々設定できるようになってくれれば便利で良いですね…!(*‘ω‘ *)

それではまた次回。

ご閲覧ありがとうございました♪

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ