“トップに戻る”ボタンを設置する方法
2025年10月17日
PAGEKitには標準で「トップに戻る」ボタン機能はありませんが、HTMLを数行追加するだけで簡単に設置できます。
ページを下までスクロールしても右下に固定表示されるため、長いページでも快適に閲覧できます。
ページを下までスクロールしても右下に固定表示されるため、長いページでも快適に閲覧できます。
完成イメージ
右下に「▲ トップに戻る」というボタンが固定表示され、クリックするとページの一番上に戻る仕組みになります。
このボタンをフッターに追加すれば、全ページ共通で利用可能です。
（※スクリーンショットを添えるとより分かりやすくなります）
このボタンをフッターに追加すれば、全ページ共通で利用可能です。
（※スクリーンショットを添えるとより分かりやすくなります）
設置手順
トップに戻るボタンは、全ページ共通で表示される「フッター」に記述するのがおすすめです。
１．フッター編集画面を開きます。
メインメニューからフッター編集画面に進みます。
２．編集画面をHTMLモードに切り替えます。
編集ツールから「HTMLモード」をクリックしてHTMLモードを開きます。
３．HTMLの末尾に下記のコードを入力します。
<a href="#top" style="position:fixed;bottom:30px;right:30px;z-index:99;background-color:#333;color:#fff;text-decoration:none;padding:12px 16px;border-radius:50px;font-size:14px;font-family:sans-serif;cursor:pointer;" onmouseover="this.style.backgroundColor='#555'" onmouseout="this.style.backgroundColor='#333'">▲ トップに戻る</a>
４．保存ボタンを押してHTMLモードを終了します。
入力が完了したら、HTMLモードを終了し、通常の編集画面に戻ります。
５．保存ボタンを押して編集内容を保存します。
編集画面「保存」ボタンを押して、編集内容を保存します。
これで全ページに「トップに戻る」ボタンが表示されるようになります。
これで全ページに「トップに戻る」ボタンが表示されるようになります。
デザインを変更したい場合（任意）
ボタンの色や文字サイズを変更したい場合は、上記コード内のスタイル値を調整します。
背景色を変更する場合：
background-color:#007BFF;
文字色を変更する場合：
color:#fff;
文字サイズを変更する場合：
font-size:16px;
動作確認
ページを公開して下までスクロールしてみましょう。
右下に「▲ トップに戻る」ボタンが表示され、クリックするとページ上部に戻ります。
特別なスクリプトは不要で、すべてのブラウザで安定して動作します。
右下に「▲ トップに戻る」ボタンが表示され、クリックするとページ上部に戻ります。
特別なスクリプトは不要で、すべてのブラウザで安定して動作します。
まとめ
PAGEKitでは標準機能として「トップに戻る」ボタンは用意されていませんが、
HTMLタグを数行追加するだけで簡単に実現できます。
フッターに追加することで、全ページに共通表示できる便利な機能になります。
コピペだけで導入できるので、初心者の方にもおすすめです。
HTMLタグを数行追加するだけで簡単に実現できます。
フッターに追加することで、全ページに共通表示できる便利な機能になります。
コピペだけで導入できるので、初心者の方にもおすすめです。
ABOUT ME  |
ホームページかんたん作成のPAGEKit（ページキット） ホームページを作るのは、むずかしそう。 そう思っていた方も、PAGEKitなら「意外とカンタンだった」と感じていただけるはずです。 専門知識がなくても、必要なページがすぐに揃うテンプレートと、やさしい操作画面。 まずは一度、実際の使いやすさを体験してみませんか？ |