SWELLのスムーススクロールがずれる原因と直し方｜Lazyloadを確認
SWELLでスムーススクロールが初回だけずれることがある
WordPressテーマ「SWELL」でサイトを制作していると、ページ内リンクをクリックした際に「最初の1回だけスクロール位置がずれる」という現象が起こることがあります。
たとえば、グローバルメニューから「実績」「サービス」「お問い合わせ」などのセクションへ移動するためにアンカーリンクを設定しているにもかかわらず、初回だけ目的の位置から大きくずれてしまうケースです。
2回目以降は正常に動くため、アンカーの設定ミスなのか、SWELLのスムーススクロール機能の問題なのか判断しにくいこともあります。
このような症状では、画像の遅延読み込みである「Lazyload」が原因になっている可能性があります。
特に、
- あるセクションまでは正常に移動できる
- そのセクションより下だけ位置がずれる
- ページを再読み込みすると再び発生する
- 2回目以降のクリックでは正常に動く
- 上部のフルワイドブロックを非表示にすると改善する
といった特徴がある場合は、Lazyloadによるレイアウトの変化を疑ってみるとよいでしょう。
スムーススクロールとは
スムーススクロールとは、ページ内リンクをクリックした際に目的の場所まで滑らかにスクロールする機能です。
たとえばメニューに、
#workというリンクを設定し、ページ内の「実績」セクションに、
workというHTMLアンカーを設定すると、その場所までページ内で移動できます。
SWELLではこうしたページ内リンクを比較的簡単に設定できるため、1ページ型の事業サイトやサービスサイトでもよく使われています。
しかし、リンクの設定自体が正しくても、ページ読み込み後に各セクションの高さが変化すると、目的の位置からずれてしまうことがあります。
初回だけ位置がずれる主な原因
ページ内リンクの位置がずれる原因はいくつかあります。
HTMLアンカーの設定ミス
最初に確認したいのが、リンク先とHTMLアンカーが一致しているかどうかです。
たとえばリンク側が、
#workであれば、リンク先のHTMLアンカーは、
workとします。
HTMLアンカー側に「#」は付けません。
文字が一文字でも異なっていると正常に移動できないため、まず基本的な設定を確認しましょう。
固定ヘッダーによる位置ずれ
固定ヘッダーを使用している場合、アンカー位置まで正しくスクロールしていても、見出し部分がヘッダーの下に隠れることがあります。
この場合は数十px程度の小さなずれになることが一般的です。
一方で、セクション1つ分など大きくずれる場合は、固定ヘッダー以外の原因も考える必要があります。
JavaScriptの遅延読み込み
SWELLやキャッシュ系プラグインには、サイト表示を高速化するためにJavaScriptの読み込みを遅らせる機能があります。
スムーススクロールに関係するJavaScriptまで遅延されると、ページを開いた直後のクリックだけ正常に処理されない可能性があります。
ただし、JavaScriptの遅延設定をOFFにしても改善しない場合は、別の原因を探します。
画像のLazyloadによるレイアウト変化
今回特に確認したいのが、画像のLazyloadです。
Lazyloadとは、ページを開いた時点ですべての画像を読み込まず、画像が画面に近づいたタイミングで読み込む仕組みです。
ページ表示速度を改善するために有効な機能ですが、画像が読み込まれる前後でセクションの高さが変わると、ページ内リンクの位置計算に影響することがあります。
なぜLazyloadでスクロール位置がずれるのか
ページ内リンクの移動では、ブラウザが目的の要素の位置をもとにスクロールします。
たとえばページが、
- コンセプト
- 実績
- お客様の声
- サービス
- お問い合わせ
という構成だったとします。
「実績」までは正常に移動できるのに、「お客様の声」以降だけ初回にずれる場合、「実績」セクションの高さがスクロール前後で変わっている可能性があります。
画像をまだ読み込んでいない状態では、実績セクションが本来より低い高さとして扱われることがあります。
その状態で「お問い合わせ」の位置を計算すると、
コンセプト
↓
実績（画像読み込み前）
↓
お客様の声
↓
サービス
↓
お問い合わせという位置を基準に移動します。
その後、実績の画像が読み込まれてセクションの高さが増えると、実績より下のコンテンツが押し下げられます。
結果として、最初に計算したスクロール位置と実際の位置に差が生まれます。
2回目のクリックではすでに画像が読み込まれているため、正常に移動できるというわけです。
原因を切り分ける方法
スムーススクロールの問題は、設定を一度に変更するのではなく、原因を一つずつ切り分けることが重要です。
方法1：どのセクションからずれるか確認する
まず、ページ上部から順番にアンカーリンクをクリックしてみましょう。
たとえば、
- 2番目の実績：正常
- 3番目のお客様の声：ずれる
- 4番目のサービス：ずれる
- 5番目のお問い合わせ：ずれる
という結果になった場合、2番目の「実績」セクションに原因がある可能性が高くなります。
このように「どこから下がずれるのか」を確認すると、調査範囲をかなり絞ることができます。
方法2：疑わしいセクションを一時的に非表示にする
原因と思われるセクションを一時的に非表示にします。
たとえば実績セクションを非表示にした状態で、3番目以降のページ内リンクが正常になるのであれば、実績セクション内で何らかのレイアウト変化が起きている可能性があります。
中のテキストや画像だけを非表示にするのではなく、必要に応じて外側のフルワイドブロック単位で確認するのもポイントです。
方法3：Lazyloadを一時的に停止する
SWELL管理画面から画像の遅延読み込み設定を確認します。
環境によって表示内容は異なる可能性がありますが、
「SWELL設定」→「高速化」
付近に画像のLazyloadに関する設定があります。
Lazyloadが有効になっている場合は、一度「使用しない」などの設定に変更して動作を確認します。
変更後は、
- 設定を保存する
- SWELLのキャッシュを削除する
- ブラウザのシークレットウインドウを開く
- トップページを新しく表示する
- 最初のクリックで下部セクションへ移動する
という手順で検証すると分かりやすいでしょう。
これで正常に移動できるようになれば、Lazyloadが原因である可能性が高くなります。
SWELLのLazyload設定を見直す
Lazyloadが原因だった場合でも、必ずしも遅延読み込みをすべて無効にする必要はありません。
SWELLの設定によっては、JavaScriptを使ったLazyloadと、ブラウザ標準の「loading=”lazy”」を選択できる場合があります。
まずはJavaScriptを利用したLazyloadから、ブラウザ標準のLazyloadへ変更して動作を確認するとよいでしょう。
改善しない場合は、一時的にLazyload自体を停止して原因を確認します。
重要なのは、
「高速化機能は有効にした方がよいから、そのままにする」
と考えるのではなく、サイトの表示や操作に問題が出ていないかを確認しながら設定することです。
高速化と正常な表示のバランスを取ることが大切です。
10秒待っても直らない場合がある理由
「画像の読み込みが原因なら、ページを開いて少し待てば直るのでは？」と思うかもしれません。
しかし、Lazyloadでは単純に時間が経過しただけでは画像を読み込まない場合があります。
画面から離れた場所にある画像は、ユーザーがその位置に近づくまで読み込みを開始しないことがあるためです。
そのため、
「ページを開いて10秒待ってからクリックしてもずれる」
という場合でも、Lazyloadが原因ではないとは限りません。
疑わしい場合は、待ち時間ではなく、Lazyload機能を一時的にOFFにして比較する方が確実です。
CSSのscroll-behaviorだけでは解決しない場合もある
スムーススクロールを実装する方法として、以下のCSSがあります。
html {
scroll-behavior: smooth;
}ブラウザ標準のスムーススクロールを利用できる便利な方法です。
ただし、今回のように「スクロール先そのものの位置が画像読み込みによって変わる」場合は、このCSSを追加しても根本的な解決になりません。
スクロールの動きは滑らかになっても、移動先の座標が変化すれば最終的な位置はずれてしまいます。
そのため、スクロール方法を変更する前にレイアウトシフトが起きていないか確認することが重要です。
フルワイドブロックが原因に見える場合も注意
SWELLでフルワイドブロックを使っていると、
「フルワイドを非表示にすると直るから、フルワイドブロックが壊れているのでは？」
と考えたくなることがあります。
しかし、新しく作成したフルワイドブロックでも同じように高さ分だけずれる場合、ブロック自体の不具合ではなく、そのセクションの高さがページ読み込み中に正しく確定していない可能性があります。
ブロックを何度も作り直す前に、
- Lazyload
- 画像サイズ
- レイアウトの高さ
- JavaScript
- 高速化設定
を確認する方が効率的です。
スクロール位置のずれを防ぐために確認したいポイント
WordPressサイトでページ内リンクを使用する場合は、以下を確認しておくとトラブルを減らせます。
- 画像に適切なサイズ情報が設定されている
- Lazyloadによるレイアウトシフトが発生していない
- 不要なJavaScript遅延を設定していない
- HTMLアンカーが正しく設定されている
- 同じHTMLアンカーを複数使用していない
- 固定ヘッダーによる位置ずれを考慮している
- キャッシュ削除後に検証している
- PCだけでなくスマートフォンでも確認している
特にサイト公開前は、トップページを一度スクロールした後だけでなく、「初めて訪問した状態」でページ内リンクをテストすることをおすすめします。
よくある質問
SWELLのスムーススクロールをOFFにすれば直りますか？
原因によります。
スムーススクロール用JavaScript自体が原因であれば改善する可能性がありますが、画像のLazyloadによってレイアウトの高さが変化している場合は、スムーススクロールを停止しても位置がずれることがあります。
まず原因を切り分けることが重要です。
LazyloadはOFFにしても問題ありませんか？
Lazyloadはページ表示速度の改善に役立つ機能ですが、必ず使用しなければならないものではありません。
OFFにして正常になる場合は、まずサイトの使いやすさを優先し、その後に画像サイズの最適化やWebP化など別の方法で表示速度を改善することもできます。
2回目から正常なら、そのままでも問題ありませんか？
おすすめはできません。
初めてサイトを訪れたユーザーが最初に操作した際に正しく移動できないため、「リンクが壊れている」「目的の情報が見つからない」と感じる可能性があります。
特にお問い合わせや料金、サービス紹介への導線では、公開前に修正しておきたいポイントです。
キャッシュを削除する必要はありますか？
設定変更後はキャッシュを削除して確認することをおすすめします。
WordPressやSWELL、ブラウザ側に以前の設定が残っていると、変更内容が反映されていないように見える場合があります。
シークレットウインドウを利用すると、初回訪問に近い状態で確認しやすくなります。
まとめ
SWELLで「スムーススクロールが最初の1回だけずれる」という場合、アンカーリンクやスムーススクロール機能だけが原因とは限りません。
特に、
「あるセクションまでは正常だが、その下だけずれる」
という場合は、その境目にあるセクションの画像やLazyloadを確認してみましょう。
原因を調べる際は、
- どのセクションからずれるか確認する
- 直前のセクションを非表示にする
- Lazyloadを一時的に停止する
- キャッシュを削除する
- シークレットウインドウで初回動作を確認する
という順番で進めると、効率よく問題を切り分けられます。
WordPressの不具合は、原因となる設定が一見関係のなさそうな場所にあることも珍しくありません。
「とりあえずCSSやJavaScriptを追加する」のではなく、まず原因を特定してから必要な対策を行うことで、サイト全体への影響を抑えながら修正できます。
ページ内リンクや表示崩れ、高速化設定など、自分で原因を特定するのが難しい場合は、WordPressに詳しいWeb制作者へ相談することも一つの方法です。
