scroll-behaviorでなめらかにスクロールしよう

このレッスンでは、scroll-behaviorを使ったなめらかなスクロールの実装方法を学び、ページ内リンクの操作感を改善できるようになることを目標にします。「CSS scroll-behavior 使い方」で調べている方向けです。

scroll-behavior: smoothを指定すると、ページ内リンク(#見出しなど)をクリックしたときに、瞬間移動ではなく、なめらかにスクロールして移動するようになります。

サンプルコードでは、html { scroll-behavior: smooth; }と指定し、「2番目のセクションへ移動」というリンクをクリックすると、対応するid="section2"の位置までなめらかにスクロールする様子を確認できます。この1行をhtml要素に追加するだけで、サイト内のすべてのページ内リンクに効果が適用されます。

初心者がよくつまずくのが、JavaScriptを使わなくてもこの効果が実現できるという点に気づきにくいことです。以前はJavaScriptでスクロールをアニメーションさせるのが一般的でしたが、今ではCSS1行で同じ効果を実現できます。

1行のCSSを追加するだけで、目次リンクをクリックしたときの操作感が大きく向上します。長い記事ページや1ページ完結型のランディングページで、よく使われる仕上げのテクニックです。