このサポートサイトは、テンプレートのカスタマイズにあたるため、サポート対象外となります。予めご理解の上ご利用をお願いいたします。

この記事は、接客サービスのボタンをクリックして、その表示されたページ内の特定の位置までジャンプする方法について説明します。

以下の手順でサイト内ジャンプを実現することができます。

実現できること

  • 接客サービスのボタンから特定箇所へ遷移する
  • ページ上部ではなく指定した見出しやセクション位置に直接ジャンプする

設定手順

1. ページにアンカー（id）を設定する

ジャンプさせたい位置のHTML要素に、任意の id を設定します。

例：
見出しにアンカーを設定する場合、対象の見出し要素に
「id = アンカー名」
を指定します。

  • アンカー名には、英数字やハイフンなどを使った任意の文字列を指定してください
  • id はページ内で一意である必要があります 
<body>
  <h1 id="{アンカー名}">Header1</h1>
</body>

2. アクション編集画面でリンク先URLを設定する

接客サービスのアクション編集画面で、リンク先URLの末尾に
「#アンカー名」
を付与します。

例：
https://example.com#アンカー名（#test-anchor）

null

補足

  • URL の「#」以降（ハッシュ部分）は、ページ内の id 属性と一致する要素を探してスクロールします
  • ページ内に一致する id が存在しない場合、ジャンプは行われず、ページ上部が表示されます

よくある注意点

  • HTML上に id が設定されていない要素にはジャンプできません
  • 日本語や全角文字を id に使用すると、正しく動作しない場合があります
  • CMS やサイト編集ツールの仕様によっては、見出しブロックに id を直接設定できない場合があります
    その場合は、HTML編集機能を利用してください

アンカーリンク以外の方法について

原則として、推奨する方法はアンカーリンクの利用です。
ページ構造が安定しており、実装・運用の両面で最もシンプルに管理できます。
一方で、アンカーリンク以外の方法として、ページ内のスクロール率を指定して表示位置を制御する方法があります。
この方法では JavaScript によるカスタマイズが必要となりますが、以下のようなケースで有効です。

  • ページ内に id を設定できない場合
  • 特定のセクションではなく、「ページの〇％地点」へ遷移させたい場合

実装例については、以下のシナリオストアもあわせてご参照ください。
https://support.karte.io/post/6tsLImH63KnzT4XyN1bNJz#2-1

※本方法もテンプレートのカスタマイズに該当するため、サポート対象外となります。