クリックするとページ最上部まで自動でスクロールする、「トップに戻る」ボタンの設置方法を説明します。ボタンの設置、遷移先となるベースボックスへのID設定、ボタンへのアンカーリンク設定の順に進めます。
手順1. ボタンを設置する
「トップに戻る」操作の起点となるボタンを設置します。設置方法には、次のようなものがあります。
テキストやボックスから自作する
ボタンパーツを利用する
左パネルの[追加]タブをクリックします。
[パーツ]タブ選択します。
ボタンの[全て表示]をクリックして、ボタンパーツを選びます。
アイコンボックスで上向き矢印のアイコンを配置する
左パネルの[追加]タブをクリックします。
[基本]タブから[icon]を選択し、アイコンを選びます。
関連記事：ボックスを画面の下端や右端に固定配置する方法
手順2. 設置したボタンの遷移先を指定する（ID設定）
ボタンの遷移先として、ページ最上部のベースボックス<div> BaseにIDを設定します。
注意：
ボックス位置を固定に設定したボックスに、IDを設定しないでください。
遷移先に設定すると、ページ最上部まで正しくスクロールしない場合があります。ヘッダーなどを固定で位置設定している場合も、IDは<div> Baseに設定してください。
手順3. 設置したボタンにアンカーリンクを設定する
設置したボタンに、作成したIDへのアンカーリンクを設定します。
手順1で設置したボックスを選択します。
右パネルの[設定]タブを開きます。右パネルが閉じている場合は開いてください。
[リンク]欄をクリックします。
[#top]を選択します。
これで遷移設定は完了です。
手順4. 更新と確認をする
サイトを更新します。 更新するまで、変更内容は反映されません。
プレビューまたは公開ページでリンクをクリックし、トップに戻るボタンが機能することを確認します。
トップに戻る 先頭 トップへ戻る TOP