TOPへ戻るボタンを設置する方法【STUDIO】

サイトの右下によくある「TOPに戻るボタン」。

STUDIOなら簡単にスムーススクロールのボタンが作れるので、設置方法をご紹介します！

TOPに戻るボタンの作り方

手順はこちら。

①ヘッダーにIDを設定

まずは「戻る位置」を準備する必要があります。

通常ヘッダーを作成されていると思うので、そのヘッダーにIDを付与します。
IDは画面右側を開くと設定できます。

ID名は何でもOKですが「header」にしておきます。

②ページの右下にボックスを設置

ボタンになるボックスをページの右下に設置します。

まずはボックスを何もないところに置きます。
どこかのボックスの中に入れてしまうと上手くいかなくなるので、必ず何もないところに置きます。

次に、そのボックスの「配置を固定」にします。
「配置」は画面右上で設定できます。

すると、ボックスがページの最上部まで移動したと思いますので、そのボックスをページ右下までドラッグしていきます。
（ある程度ページの右下までドラッグしないと位置を設定できないため）

ボックスの位置を以下のように設定します。

• 配置： 固定

• 位置： 右 32・下 32

※位置を「右 0・下 0」にして、ボックスにマージンを設定する方法でもOKです。

画面はこんな感じです。

！ボックスがドラッグできない場合
ヘッダーを固定で表示している場合、重ね順によってはボックスが下側に潜り込んでしまいドラッグできない状態になります。
その場合は、ボックスの「重ね順」の数字をヘッダーの数字よりも大きくします。
そうすればヘッダーよりも上側に出てくるのでドラッグできるようになります。

③ボタンのデザイン

ここからボックスをデザインしていきます。
※数値は自由です。

• 横幅： 40px

• 縦幅： 40px

• 角丸： 50%

• 透明度： 0.3

• 塗り： #111111

ホバーの設定もしておきます。

• 条件付きスタイル： ホバー

• 透明度： 0.9

④アイコンの追加

アイコンをボックスの中に挿入します。

アイコンの検索窓に「up」と入力すると候補が出てくるので、お好きなものを選んでください。

アイコンの設定は以下のとおりです。

• サイズ： 24

• 色： #FFFFFF

④リンクの設定

クリックするとヘッダーに移動できるようにリンクを設定します。

画面右側のリンクをクリックすると、上記①で設定したID「#header」があると思うので、それを選択します。

⑤完成

これで完成です。
STUDIOなら簡単にスムーススクロールの「TOPに戻るボタン」が実装できます。