アンカーリンクを使ってページ内リンクを行う最、ヘッダーを固定にしていると思い通りの動きをしてくれないことがあります。 これは、アンカーリンクのジャンプ先がブラウザ上部を基点に表示されるためです。 ヘッダーは固定のままにしたいですが、スクロールするコンテンツが隠れてしまうのは避けたいところ。コンテンツがヘッダーの高さ分下に表示されればちょうどいいですよね。 これを解消する方法として「CSSに記述する方法」と「jQueryを使う方法」があります。 内容的には比較的易しめなものですが、アンカーリンクがずれてしまう現象って割と発生しやすいものかなと思いましたので、今回のブログで取り上げていこうと思います。
![【CSS&jQuery】固定ヘッダー時アンカーリンクの位置を調整する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/c18ed64ba0801b2d42ada58a00be6a424fa999d3/height=288;version=1;width=512/https%3A%2F%2Fsenoweb.jp%2Fwp-content%2Fuploads%2F2020%2F03%2F8f61f2827f60779348f88168de8d7928_m.jpg)