同一ページ内スクロールアンカーリンクの追加

執筆者:

カテゴリ:

,

同一ページ内スクロールアンカーリンクの追加

これはプレミアム機能であり、バージョン4.0.1以降で利用可能です

同一ページ内スクロールアンカーリンクとは、同一ページ内の特定の場所を指すリンクです。同一ページ内リンクをクリックすると、ブラウザが指定されたエリアに向かってスクロールします。

同一ページ内アンカーリンクを作成するには、次の2つが必要です:

  1. 要素に設定されたカスタムクラスまたはカスタムID
  2. そのカスタムクラスまたはIDを参照するリンクまたはボタン

1. 要素へのカスタムクラスまたはカスタムIDの設定

ページの下部付近にある要素を1つ選択し、そのプロパティを開きます。高度な設定エリアで、「go_here」という名前のカスタムクラスまたはカスタムIDを追加します。

2. カスタムクラスまたはIDを参照するリンクまたはボタン

次に、ページの上部付近のどこかにリンクを作成するか、ボタン要素を追加します。リンクとしてURLを追加する代わりに、「go_here」をカスタムクラスとして追加した場合は「.go_here」(ドット付き)を使用し、カスタムIDとして追加した場合は「#go_here」(ハッシュ記号付き)を使用します。

ページを保存した後、リンク/ボタンをクリックすると、ページ下部の要素に向かってスムーズにスクロールするはずです。

名前付きアンカーをターゲットにすることもできます

次のような名前付きアンカー

<a name="go_here"></a>

も、「#go_here」(ハッシュ記号付き)へのリンクを追加することでターゲットにできます。

その他の用途

クラス名またはIDを使用してターゲットを指定する限り、エディタエリアの外側であっても、ページ内の他の任意の領域をターゲットにすることができます。