ページ内アンカーリンクのジャンプ位置がずれる

といったページ内リンクをすると、その途中に<img loading=”lazy”>があると、飛び位置がずれる。

さらに、上部のヘッダーを固定表示していると、ジャンプ後にヘッダーの下にコンテンツが隠れる。

その対策↓

まず画像にはwidthとheightを入れる。これは画像の実サイズをいれたらOK。もちろんレスポンシブ対応なので比率を指定しているに過ぎない。

<img src="aaa.jpg" width="200" height="100" loading="lazy">

これだけで飛び位置がずれるのは解消できる。

以前これをやってもずれまくっていたが、今やったらできた。~~ブラウザの不具合だったのだろう~~（多分こちらの問題だった＞）。

さらに、ヘッダーの高さを90pxぐらいposition: fixedで入れているので、実際のジャンプ位置はターゲット位置より上に90pxのところで止まってほしい。

これはCSSで以下のようにやるといい。

html {
  scroll-padding-top: 90px;
}

これだけ。

ちなみに、scroll-padding-topはスクロールの親要素に付与するもの。bodyにつけてもだめ。

もし飛び先の子要素の方で位置をずらしたければ、以下のようにやる。

<div id="aaa">
  ここにジャンプ
</div>

#aaa {
  scroll-margin-top: 90px;
}

しかし注意点として、以下のようなコードがあるとやっぱりジャンプ位置はずれる。

<picture>
  <source media="(max-width:767px)" srcset="sp-300x500.png">
  <source media="(min-width:768px)" srcset="pc-1000x700.png">
  <img src="sp.png" width="300" height="500" loading="lazy">
</picture>

これは、スマホ用とPC用の画像を画面横幅によって出し分けているが、widthとheightがスマホ用の画像で指定しているので、PCではずれてしまう。これを解消する方法は、
loading=”lazy”
を削除したらいい。