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

どのように動作するか

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

入手方法

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

  1. パブリッシャーアカウント>サイトビルダーに移動します。
  2. ボタンコンポーネントをスクロールを開始するブロックに追加して、ボタンテキストを変更します。
  3. コンポーネントタイプをリンクに設定して、リンクをフィールドに挿入します。
  4. 以下のコードをカスタムコードブロックに挿入します:

Copy
Full screen
Small screen
<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>

  1. 以下のパラメータを変更します:
    • 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です。

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

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


自分のコードを追加する

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

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

この記事は役に立ちましたか?
ありがとうございます!
改善できることはありますか? メッセージ
申し訳ありません
この記事が参考にならなかった理由を説明してください。 メッセージ
ご意見ありがとうございました!
あなたのメッセージを確認し、体験を向上させるために利用させていただきます。
このページを評価する
このページを評価する
改善できることはありますか?

答えたくない

ご意見ありがとうございました!

お役立ちリンク

最終更新日: 2021年7月20日

誤字脱字などのテキストエラーを見つけましたか? テキストを選択し、Ctrl+Enterを押します。

問題を報告する
当社は常にコンテンツを見直しています。お客様のご意見は改善に役立ちます。
フォローアップ用のメールをご提供してください
ご意見ありがとうございました!