アンカーリンク(aタグ)を使って、メニューや目次からページ内の特定の場所にジャンプさせることってよくありますよね。 ところがそれにloading=”lazy”などの遅延読み込みを組み合わせると、ジャンプ先がずれてしまいます。 ランディングページでどうしても両者を共存させたかったので、色々調べて解決した方法をご紹介します。 スムーススクロール用のjQueryの記述を変えよう まずHTML側は、ざっくりこんな形だとします。 <ul> <li><a href="#link01">リスト01</a>></li> <li><a href="#link02">リスト02</a></li> <li><a href="#link03">リスト03</a></li> </ul> <div id="link01"> <p>ブロック01</p> <img loading="lazy" src="demo.jpg