メニューを使わずに任意のセクションへジャンプする方法

​クローバ PAGE では同じページ内の指定した位置に移動するメニューをかんたんに作成することができます。

しかしメニューはページの上部にあるため、​普通にリンクから別のセクションに移動させたいケースもあるでしょう。今回はその方法について紹介します。

タグにID属性は指定できない

​クローバPAGEではシステムで使用されている要素のIDとお客様が作成した要素のIDとが重複してしまうのを防ぐため、HTMLの編集で設定したタグにID要素を指定することはできません。従って、<span id="element-id">リンク</span>のようなタグを作成しても、ID属性は削除されてしまいます。。

代わりに、以下の手順でリンクを作成します。

セクションのIDを取得する

移動したいセクションを選択して、右メニューのセクション設定の一番下にあるIDを確認します。この例では「section-3」 がセクションのIDです。

HTMLの編集を開いて、以下のようにAタグを記述します。

<a href="#" data-action="scroll" data-target="3">他のセクションへのリンク</a>​

​ここで、data-targetにセクションID内の番号を指定します（IDがsection-3なら3が番号となります）

この状態で保存すると、指定したセクションにジャンプするリンクを作成することができます。

「a href="#section-3"」との違い

ここまでの説明で、セクションのIDがわかっているのなら、<a href="#section-3">リンク</a>でいいじゃないかと思われる方もいらっしゃるかもしれません。はい、機能的には確かにそれでも大丈夫です。なのですがdata-action="scroll"を使っていただくと、よりおしゃれなスクロールによる遷移を実現することができます。興味のある方はぜひ比較してみてください❗️

アイコンや画像のクリック時に任意のセクションにジャンプする

セクションのIDをURLの末尾につけることで、アイコンや画像をクリックした時に任意のセクションに移動することができます。​「新しいタブで開く」のチェックは外してください。

こちらも合わせてお読みください。