position:fixedでヘッダーを固定しているデザインでページ内リンクを設定すると、リンク先へジャンプした時にヘッダの高さ分、位置がズレてしまうのをどうにか出来ないものか…と格闘したので、その対処法のメモです。 単純にheaderの高さ分paddingとmarginで相殺する例えば、以下のようなソースに実装すると <div class="header"> ヘッダー </div> <div class="content"> <a href="#link01">コンテンツ</a> </div> <div class="content" name="link01" id="link01">リンク先</div>ヘッダの高さが80pxとした場合 .header { width: 100%; min-width: 960px; height: 80px; position: fixed; lef
![ヘッダ固定時のアンカーリンクずれ解消法|assassin@Web屋](https://cdn-ak-scissors.b.st-hatena.com/image/square/a774be61fb51f9018616caaa9b5f5151d15be5ed/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F10687955%2Frectangle_large_type_2_3a02ada5742946bdb1c199dda0e7e97e.jpeg%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)