Velo初心者向け｜ページ読み込み時に自動でスクロールする方法

Wix StudioやWixエディタでページを開いた際、特定の位置まで自動でスクロールさせたいという場面は意外とよくあります。例えば、ヒーローセクションを飛ばしてコンテンツの中盤に誘導したい時や、ページ内のアンカー的な使い方をしたい時に便利です。

この記事では、Wix Veloで簡単に実装できる「ページ読み込み時に自動スクロール」するコードをご紹介します。

① スクロール先の要素にIDを付ける

まず、スクロールさせたい要素に ID（識別子）を設定します。

例えばセクションのIDを scrollTarget としておきます。

• エディタ上でその要素を選択

• [プロパティパネル] → [ID] → scrollTarget に設定

② Veloコードを追加する

ページコードに以下のコードを追加してください。

$w.onReady(function () {
  // ページ読み込み後、対象要素までスムーズにスクロール
  setTimeout(() => {
    $w("#scrollTarget").scrollTo()
      .catch((err) => console.log("スクロール失敗:", err));
  }, 500); // ページ全体が読み込まれるのを少し待つ
});

✅ setTimeout で500ms遅らせているのは、ページのレンダリングが終わってからスクロールさせるためです。

④ プレビューで確認する

プレビューでページを読み込んだ時、自動的に下部の要素までスクロールされるか確認しましょう。

補足｜アンカーリンクとの違い

• アンカーは「ユーザーがリンクをクリックして」ジャンプするのに対し、

• 今回の方法は「ページを読み込んだ瞬間に自動でスクロール」されます

例えば、LPで上部がローディングやバナーなどの場合に、コンテンツ部分へ誘導したいときに便利です。

🔁 応用編：クエリパラメータで分岐する

例えば ?scroll=true のようなURLでアクセスされたときのみ自動スクロールさせたい場合：

import wixLocation from 'wix-location';

$w.onReady(function () {
  const query = wixLocation.query;
  if (query.scroll === "true") {
    setTimeout(() => {
      $w("#scrollTarget").scrollTo();
    }, 500);
  }
});

👉 クエリパラメータを使えば「特定のときだけ動かす」などの柔軟な制御が可能になります。

まとめ

ページ読み込み時の自動スクロールは、ユーザー導線を工夫する上でとても便利なテクニックです。Veloを使えば簡単に実装できるので、ぜひ一度試してみてください！

応用として、クエリパラメータとの組み合わせも非常に便利なので、キャンペーンページや広告LPなどにも活用できますよ。