【レスポンシブ対応】ページ遷移でスクロール 位置ずれを調整（sizes=”auto”）
福岡・東京・大阪・愛知・長崎でホームページ制作、WEB広告運用、WEBマーケティングを行っている株式会社スゴヨクです。
ホームページの読み込み速度を上げつあまりに、
画像（loading=”lazy”を付けている場合など）の読み込みが間に合わず、位置がずれることがありませんか？
ページ遷移やアンカーリンクで特定の位置までスクロールさせたいのに、
PCでは問題なくてもスマホでは処理能力が遅くずれたりすることがあるかと思います。
特定の位置までスクロールについては、相当数の記事が出ているので、参考までに。
javaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
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のみで対応が可能です。
|
1 2 3 |
<img loading="lazy" src="〇〇" width="〇〇" height="〇〇" alt="〇〇" /> ↓これを <img loading="lazy" src="〇〇" sizes="auto" alt="〇〇" /> |
このようにしてしまえば、スクロールの位置ずれが解消されます。
嘘だと思って１度試していただければと思います。
HP無料診断
【実践マーケティング手法２２選】 無料ダウンロード
助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」
月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。
