指定したブロックまでページをスクロールさせる方法

どのように動作するか

サイトの特定のブロックにユーザーの注意を引きたい場合は、カスタムHTMLコードを使ってこのブロックへの自動スクロールを設定することができます。既存のソリューションを使用することも、独自のコードを追加することもできます。

入手方法

既存のソリューションを使用する

1. アドミンページでプロジェクトを開きます。
2. サイドバーで「サイトビルダー」をクリックします。
3. 「サイトビルダーを開く」をクリックします。
4. 「ボタン」コンポーネントをスクロールを開始するブロックに追加して、ボタンテキストを変更します。
5. コンポーネントタイプを「リンク」に設定して、リンクをフィールドに挿入します。
6. 以下のコードを「カスタムコード」ブロックに挿入します：

<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;

var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;

var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
  var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
  scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>

7. 以下のパラメータを変更します：
   • scrollBlock — スクロールボタンを含むCSSクラスのブロックの名前。可能なオプション：
     • .block--header（ヘッダーブロック）
     • .block--hero（コールトゥアクションブロック）
     • .block--packs（パックスブロック）
   • scrollToBlockNumber-ページをスクロールする先のブロックのシーケンス番号。最低の値は0です。
   • scrollButtonNumber-スクロールボタンを含むブロックのシーケンスナンバー。最低の値はscrollToBlockNameです。
   • scrollToBlockName-スクロール先のページのブロックのCSSクラスの名前。可能なオプション：
     • .block--header（ヘッダーブロック）
     • .block--hero（コールトゥアクションブロック）
     • .block--html（カスタムコードブロック）
     • .block--packs（パックスブロック）
     • .block--description（説明ブロック）
     • .block--gallery（ギャラリーブロック）
     • .block--requirements（システム要件ブロック）
     • .block--faq（よくある質問ブロック）
     • .block--embed（ソーシャルメディアウィジェットブロック）
     • .block--news（ニュースブロック）
     • .block--footer（フッターブロック）
   • scrollToBlockNumber-ページをスクロールする先のブロックのシーケンスナンバー。最小値はscrollToBlockNumberです。

8. 「プレビュー」をクリックして変更を確認します。

この手順については、チュートリアルビデオをご覧ください：

自分のコードを追加する

1. ビルダーで、ブロックを追加するをクリックして、カスタムコードを選択します。

2. 独自のコードをブロックに挿入します。

お役立ちリンク