スムーススクロールをCSSで実装する方法

こんにちは、Naya☆LogのRiku Nayaです♪

今日は、スムーススクロールをCSSのみで実装する方法を説明します！

今までは、jQueryを使って実装するのがほとんどだったと思いますが、これがcssだけでもできてしまうのです！汗

これを解決するのが、今回紹介するscroll-behaviorというCSSプロパティです。

scroll-behavior

scroll-behaviorに指定出来る値は次の2つ。

手っ取り早くスムーススクロールを有効化するなら、html要素全体にscroll-behavior:smooth;をセットすればOKです。

html

<nav>
  <a href="#section1">1</a>
  <a href="#section2">2</a>
  <a href="#section3">3</a>
</nav>
<main class="scroll-container">
  <section id="section1">1</section>
  <section id="section2">2</section>
  <section id="section3">3</section>
</main>

css

.scroll-container {
  scroll-behavior: smooth;
}

ブラウザの対応状況

残念ながらIEとSafariが対応しておりません。。

常用はまだ無理なので、それまでは、素直にjQueryに頼ったほうが良いかもしれません(>_<)！