【レスポンシブ対応】ページ遷移でスクロール　位置ずれを調整（sizes=”auto”）

福岡・東京・大阪・愛知・長崎でホームページ制作、WEB広告運用、WEBマーケティングを行っている株式会社スゴヨクです。

ホームページの読み込み速度を上げつあまりに、
画像（loading=”lazy”を付けている場合など）の読み込みが間に合わず、位置がずれることがありませんか？

ページ遷移やアンカーリンクで特定の位置までスクロールさせたいのに、
PCでは問題なくてもスマホでは処理能力が遅くずれたりすることがあるかと思います。

特定の位置までスクロールについては、相当数の記事が出ているので、参考までに。

javaScript

window.addEventListener('load', function() {
  // 現在のページURLのハッシュ部分を取得
  const hash = location.hash;

  // ハッシュ部分がある場合の条件分岐
  if (hash) {
    // ページ遷移後のスクロール位置指定
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;

    // 処理を遅らせる
    setTimeout(function() {
      // リンク先を取得
      const target = document.querySelector(hash);

      // リンク先までの距離を取得
      const position = target.offsetTop;

      // 指定の場所までスムーススクロール
      document.documentElement.scrollTop = position;
      document.body.scrollTop = position;
    }, 700);
  }
});

画像読み込み遅延の対応

のタグにwidthとheightを入れたらOKとなっていますが、スマホの場合は制御するのが面倒じゃないでしょうか？

なんとhtmlのみで対応が可能です。

↓これを

このようにしてしまえば、スクロールの位置ずれが解消されます。

嘘だと思って１度試していただければと思います。