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

こんにちは。

ゆうや（@yuyaphotograph）です！

この記事では、

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

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

CSSのscroll-behaviorプロパティとは？
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.