scroll-behaviorでページ内遷移のスクロールを滑らかにする方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介します。

実現したい挙動

冒頭、ページ内遷移のスクロールについて、既定の挙動と実現したい挙動をお示しします。

Codepenに触れて体験の違いを感じてみてください。

既定の挙動は以下の通りです。スクロールされるというよりかジャンプするに近い挙動です。

実現したい挙動は以下の通りです。遷移先に対して滑らかにスクロールします。

ページ内遷移によって発生するスクロールの挙動は、scroll-behaviorで制御することができます。

既定の値はautoとなっており、スクロールされるというよりかジャンプするに近い挙動です。

一方で値をsmoothに指定すると、遷移先に対して滑らかにスクロールされるようになります。

* {
  scroll-behavior: smooth;
}

Tailwind CSSではscroll-behaviorに対するUtility classが用意されています。

Utility class	CSS
`scroll-auto`	`scroll-behavior: auto;`
`scroll-smooth`	`scroll-behavior: smooth;`

今回はCSSプロパティの一つであるscroll-behaviorを使用して、ページ内遷移のスクロールを滑らかにする方法をご紹介しました。

スタイリングされる方の一助となれば幸いです。

ご精読ありがとうございました。