TailwindCSSでのスムーススクロールの実装 - Qiita

背景と実施したこと Webサイトを構築する際にヘッダーメニューは必ずあると思いますが、今回は同ページの中でスクロールするような動きを実装してみました。 ※以下のようなイメージ 使用しているフレームワークなどの情報は以下の通り next: 12.0.7 react: 17.0.2 TailwindCSS: 3.01 この挙動は「スムーススクロール」と呼ばれるようで、ググる場合はこれがキーワードになると思います。 実装方法としては、これ用のライブラリをインストールすることなくCSSでのみ実装していきます。 （というかそこまで複雑な挙動・実装ではないのでそれで十分） 目次 概要 スムーススクロールの実装(ヘッダーメニューとリンク先) スムーススクロールの実装(CSS) まとめ 概要 今回のサマリーとしては以下の3点がポイントになります。 ヘッダーメニューをクリックしたときに同じページの下部分にス