【jQueryなし!】CSSだけでスムーススクロールを実装できるscroll-behaviorとは?

CSSだけでスムーススクロールを実装する方法【scroll-behavior】

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • jQueryを使わず、CSSだけでスムーススクロールを実装する方法が知りたい
  • CSSのみで実装するスムーススクロールのデモが見たい
  • CSSのみで実装するスムーススクロールって主要ブラウザでサポートされてるの?

という方のお悩みを解決します!

CSSのscroll-behaviorプロパティとは?

CSSだけでスムーススクロールを実装するにはscroll-behaviorプロパティを使用します!

scroll-behaviorプロパティとはページ内スクロールする要素のスクロールの振る舞いを決めるもので、初期値はautoとなっております。

スムーススクロールさせるにはautoではなくsmoothを指定してあげます。

CSS
scroll-behavior: smooth;
注意
現在、IEとSafariでは未対応となっているため実際のプロジェクトで使用する機会はまだ先となりそうです。雑学として頭の片隅にでも留めておきましょう〜

CSSだけで実装するスムーススクロールのデモ

上述したscroll-behaviorプロパティを使って実際にスムーススクロールを実装するには、
html要素に「scroll-behavior:smooth;」を指定してあげるのが最もてっとり早いです!

 

以下のようなHTMLがあったとしましょう。

HTML
<a href="#Item01">項目01</a>
<a href="#Item02">項目02</a>

<div class="Content">
  <div id="Item01" class="Item">項目01</div>
  <div id="Item02" class="Item">項目02</div>
</div>

こんな風にCSSを書けばいとも簡単にスムーススクロールができてしまいます!

CSS
html{
  scroll-behavior: smooth;
}
a{
  text-decoration: none;
}
.Content{
  padding-top: 96px;
}
.Item{
  border-radius: 50%;
  width: 240px;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #5bc8ac;
  color: #fff;
}

 

実際の動きを確認したい方はこちらのデモをポチポチしてみていただけると!

See the Pen
JjdzvQy
by 石森裕也 (@yuyaphotograph)
on CodePen.

まとめ

今回紹介したCSSのscroll-behaviorプロパティを使えばjQueryなしで簡単にスムーススクロールを実装することができます!

最後にもう一度おさらいしてみましょう。

  • html要素にscroll-behavior:smoothを指定する
  • IE、Safari以外の主要ブラウザでは対応されている

 

「スクロールで実装できることをもっと知ってスキルアップしたい!」

という方は以下の記事にも目を通してみてくださいまし〜

【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方【jQuery】スクロールして可視範囲に入ったら下線を引くアニメーションの作り方 スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方スクロールアニメーションをjQueryなしで簡単実装できるライブラリ AOSの使い方 画像を左から右にスライドインで表示するアニメーション画像を左から右にスクロール量に応じてスライドインで表示するアニメーション【Javascript・CSS】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です