トップへ戻るボタンとは

一定量スクロールすると画面の隅に現れ、クリックするとページの最上部までスムーズに戻るボタン。

概要

ページを下の方までスクロールすると画面の右下などに現れ、クリックするとページの一番上まで戻してくれるボタンです。長い記事やページで、もう一度ヘッダーのメニューを使いたいときや、最初から読み直したいときに便利です。クリック時は一瞬で飛ぶのではなく、なめらかにスクロールして戻る実装が一般的です。

別名

表記ゆれ：ページトップボタン、スクロールトップ、上に戻るボタン、back to top button、totop ボタン

現場では「トップへ戻るボタン」「ページトップボタン」がよく使われ、実装上の変数名やクラス名としては totop と略されることもあります。

AI への伝え方

「トップへ戻るボタンを付けて」で通じます。どれくらいスクロールしたら表示するか（例：画面 1 個分下がったら）と、クリック時になめらかにスクロールさせるかどうかを伝えると仕様がぶれません。

似たパーツとの違い

「FAB（フローティングアクションボタン）」は画面に常に浮いて表示される汎用のボタンで、トップへ戻る機能はその使い道の一つです。トップへ戻るボタンは、スクロールしていない状態では表示しないのが基本という違いがあります。

デモ

コード

HTML

<div class="back-to-top-demo">
  <main class="back-to-top-demo__body">
    <p>下にスクロールすると、右下に「トップへ戻る」ボタンが表示されます。</p>
    <p>これはダミーの本文です。ボタンの出現とスムーススクロールを確認するために、長さを確保しています。</p>
    <p>さらにスクロールを続けます。</p>
    <p>まだ本文が続きます。</p>
    <p>ボタンが表示されたら、クリックしてページの一番上まで戻ってみてください。</p>
    <p>なめらかにスクロールして、最初の位置まで戻るはずです。</p>
    <p>下までスクロールすると、このダミー本文はここで終わりです。</p>
  </main>
  <button class="back-to-top-demo__button" type="button" aria-label="トップへ戻る" hidden>↑</button>
</div>

CSS

.back-to-top-demo {
  font-family: sans-serif;
}

.back-to-top-demo__body {
  color: #333;
  line-height: 1.8;
  min-height: 1400px;
}

.back-to-top-demo__body p {
  margin: 0 0 16px;
}

.back-to-top-demo__button {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #0017c1;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.back-to-top-demo__button:hover {
  background: #00118f;
}

const button = document.querySelector(".back-to-top-demo__button");

window.addEventListener("scroll", () => {
  button.hidden = window.scrollY <= 200;
});

button.addEventListener("click", () => {
  window.scrollTo({ top: 0, behavior: "smooth" });
});