javascriptを使わずにスムーススクロールを実装できるscroll-behaviorを使った際に、 ページ内検索などにも影響が出るのを防ぐ方法と、ヘッダーなどが被らないようにする方法をお伝えします。 scroll-behavior: smooth; は、ページ内リンクなどを使うときに一瞬で飛ぶのではなく、滑らかに移動しながら目的の位置まで到達するようになる機能なのですが、 ページ内リンク以外の機能にもスムーススクロールが有効になってしまうという、少し困った性能をしています。 重大な欠陥などがあるわけではないので、そこまで気にする必要もないのかもしれませんが、ページ内リンクにのみ有効にできるならそれに越したことはないのかな?とも思ったので、 コリスさんの記事を眺めていた時に発見した、 (多分)リンクにのみ、スムーススクロールを実装する方法をご紹介します。
![css でスムーススクロールを有効にしたときの位置調整とページ内検索には効かないようにする方法 | もち備忘ログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/6acbbd4cfb7548e0d255c319b4a7b7d03fe70e0d/height=288;version=1;width=512/https%3A%2F%2Fmothihuku.com%2Fwp-content%2Fuploads%2F2022%2F12%2Fpic03.png)