scroll-behaviorで平滑スクロール、一行でいけるんだ
Yo！メモくん、何してるんだい？
サングラス大将、お疲れ。今JS書いてて、アンカーリンクの平滑スクロールを実装してるところ。
Really? CSSでいいじゃん！すごく簡単だろ？
CSSの？どんなやつ？
一般的に、アンカーリンクをスムーズにスクロールさせる時、JavaScriptやjQueryで実装することが多いです。
例えば、
<!-- HTML -->
<a href="#section2">Go to Section 2</a>
<div id="section2">ここがセクション2</div>
// JavaScript（jQuery）
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
const target = $(this.hash);
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 600);
}
});
でも実は、CSSだけでもできるんです。
そのためのプロパティがこちら：
html {
scroll-behavior: smooth;
}
これを書くだけで、リンクをクリックした時にスーッと自然にスクロールしてくれます。
ね、めっちゃシンプルでしょう？
へぇ〜、こんな一行で済むんだね。
関連記事
