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

ページ内リンクのスムーズスクロールは普段JavaScriptを使って実装することが多いですが、CSSでも実装できるようだったので試してみました。

サンプルコード

scroll-behaviorを使用します。

<nav class="nav">
	<a href="#section-a">セクションA</a>
	<a href="#section-b">セクションB</a>
	<a href="#section-c">セクションC</a>
	<a href="#section-d">セクションD</a>
</nav>

<section id="section-a" class="section">
	<h2>セクションA</h2>
</section>
<section id="section-b" class="section">
	<h2>セクションB</h2>
</section>
<section id="section-c" class="section">
	<h2>セクションC</h2>
</section>
<section id="section-d" class="section">
	<h2>セクションD</h2>
</section>

スクロール要素に対してscroll-behavior: smooth を設定します。

html {
    scroll-behavior: smooth;
}

これでスムーズスクロールの実装ができました。
スムーズスクロールのデモページ

ページ内リンクのクリック時だけでなく、アンカー付きのURLでページに遷移してきた時にもスムーズスクロールになるようです。
ページ遷移時のスムーズスクロールのデモページ