メインコンテンツにスキップ

ページ最上部まで自動スクロールするボタンを設置する

アイコンボックスやボタンを作成し、ページ先頭に移動するアンカーリンクをつけることで、ページトップに戻るボタンを配置する方法を説明します。

今週アップデートされました

(1) ボタンを設置する

[トップに戻る]のボタンとなるテキストやボタンを設置します。
ボタン設置方法の例:左パネルの[追加]タブ > [パーツ]タブ > ボタン[全て表示]

他の例として、アイコンボックスで上向矢印のアイコンだけを設置することも可能です。
関連記事:ボックスを画面の下端や右端に固定配置する方法

(2) (1)で設置したボタンの遷移先を指定する(ID設定)

次に、ページトップに戻るボタンが押されたときの遷移先を指定します。

  1. 該当ページの最上部にある任意のボックスを選択します。

  2. 右パネルの[設定]タブを開きます。右パネルが閉じている場合は開いてください。

  3. [ID]欄に、例として[top]を入力します。

(3) (1)で設置したボタンにアンカーリンクを設定する

  1. (1)で設置したボックスを選択します。

  2. 右パネルの[設定]タブを開きます。右パネルが閉じている場合は開いてください。

  3. [リンク]欄をクリックします。同ページ内に設定したIDや、同プロジェクト上の別ページのパスが表示されます。

  4. [#top]を選択します。これで遷移設定は完了です。

(4) 更新と確認をする

  1. サイトを更新します。 更新するまで、変更内容は反映されません。

  2. プレビューまたは公開ページでリンクをクリックし、トップに戻るボタンが機能することを確認します。

トップに戻る 先頭 トップへ戻る TOP

こちらの回答で解決しましたか?