画面右下に固定！「トップに戻る」ボタンの実装方法｜CSS＆JSで簡単に作れる

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
長いページをスクロールしているとき、「上に戻りたいな」と感じたこと、ありませんか？

特にサービス紹介やブログ記事のように縦長のコンテンツでは、画面右下に固定された『トップに戻る』ボタンがあるだけで、ユーザーの操作性が大きく向上します。

今回は、HTML＋CSS＋JavaScriptで実装するシンプルな方法を紹介します。
さらに、スクロール量に応じて表示・非表示を切り替える工夫や、デザインの応用例までまとめました。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本構造：HTMLのマークアップ

最初に、シンプルな戻るボタンのHTMLを用意します。

<a href="#" id="backToTop" class="back-to-top">▲</a>

ここではシンプルに▲アイコンを使用していますが、SVGやテキスト「TOP」に変えるのもおすすめです。

CSSで右下固定＋初期非表示

ボタンを常に画面右下に固定し、最初は非表示にしておきます。

  .back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #4caf50;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    font-size: 18px;
    text-decoration: none;
    display: none;
    transition: opacity 0.3s ease;
  }
  .back-to-top.show {
    display: block;
    opacity: 0.9;
  }
  .back-to-top:hover {
    opacity: 1;
  }

JavaScriptで表示制御＋スムーススクロール

スクロール位置が一定以上になったらボタンを表示し、クリックでスムースにトップへ戻す処理を加えます。

  const backToTop = document.getElementById("backToTop");
  window.addEventListener("scroll", () => {
    if (window.scrollY > 300) {
      backToTop.classList.add("show");
    } else {
      backToTop.classList.remove("show");
    }
  });
  backToTop.addEventListener("click", (e) => {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: "smooth" });
  });

デザイン応用：ホバー時のシャドウ＆サイズ変化

シンプルな丸ボタンに、ホバー時のアニメーションを加えると視覚的に楽しくなります。

  .back-to-top:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

SVGアイコンを使ったバリエーション

よりモダンなUIにしたい場合は、テキストや記号の代わりにSVGを使用します。

<a href="#" id="backToTop" class="back-to-top">
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 4l-8 8h16l-8-8z" stroke="#fff" stroke-width="2" /></svg>
</a>

まとめ