トップへ戻るボタン実装解説｜Scroll to Top Button Guide

2026年7月2日

トップへ戻るボタンデザイン見本

スクロール量を監視して一定量を超えたら現れ、クリックでページ最上部へスムーズに戻る「トップへ戻るボタン」の実装デモ。コピーしてすぐに使える HTML・CSS・JS のコードを掲載。
HTML・CSS・JSコードプレビューツール にて実装確認ができます。

関連: スクロール連動アニメーションとは？

① 基本のトップへ戻るボタン（スクロールで出現）

下へスクロールするとボタンが現れます

HTML

<button class="to-top" id="to-top" aria-label="上部へ戻る">↑</button>

CSS

.to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #667eea;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
  z-index: 999;
}
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover {
  background: #5568d8;
}

(function () {
  var btn = document.getElementById('to-top');
  if (!btn) return;
  var threshold = 200;
  window.addEventListener('scroll', function () {
    if (window.pageYOffset > threshold) {
      btn.className = 'to-top show';
    } else {
      btn.className = 'to-top';
    }
  });
  btn.addEventListener('click', function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
})();

window.pageYOffset と scrollTo

scroll イベントで現在のスクロール量（window.pageYOffset）を監視し、しきい値（例では 200px）を超えたら show クラスを付けてボタンをフェード表示する。クリック時は window.scrollTo に behavior: ‘smooth’ を渡すだけで、JavaScript から滑らかに最上部まで戻せる。ボタンは position: fixed で常に画面の右下に固定される。デモ内では枠内のスクロールで動作を再現している。

② デザインのバリエーション（形・色・ラベル）

HTML

<button class="to-top" aria-label="上部へ戻る">↑</button>
<button class="to-top square" aria-label="上部へ戻る">↑</button>
<button class="to-top grad" aria-label="上部へ戻る">↑</button>
<button class="to-top label" aria-label="上部へ戻る">↑ TOP</button>

CSS

.to-top {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #667eea;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.to-top.square {
  border-radius: 12px;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.to-top.grad {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.to-top.label {
  width: auto;
  height: 48px;
  border-radius: 24px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  background: #10b981;
}

形と配色は border-radius と background で調整

ボタンの土台は共通で、border-radius を 50% にすれば円形、12px 前後にすれば角丸の四角になる。背景は単色でもグラデーション（linear-gradient）でも自由に差し替えられる。矢印だけでなく「↑ TOP」のようにラベルを添えると初見のユーザーにも役割が伝わりやすい。width: auto にすると横長のピル型ボタンになる。

③ スクロール進捗リング付き

スクロールするとリングが伸びます

HTML

<button class="to-top ring" id="to-top" aria-label="上部へ戻る">
  <span class="ring-inner">↑</span>
</button>

CSS

.to-top.ring {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: conic-gradient(#667eea 0%, rgba(255,255,255,0.2) 0%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 999;
}
.to-top.ring.show {
  opacity: 1;
  visibility: visible;
}
.to-top.ring .ring-inner {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #1a1a2e;
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

(function () {
  var btn = document.getElementById('to-top');
  if (!btn) return;
  var accent = '#667eea';
  var trackColor = 'rgba(255,255,255,0.2)';
  window.addEventListener('scroll', function () {
    var top = window.pageYOffset;
    var max = document.documentElement.scrollHeight - window.innerHeight;
    var pct = max > 0 ? Math.round((top / max) * 100) : 0;
    btn.style.background = 'conic-gradient(' + accent + ' ' + pct + '%, ' + trackColor + ' ' + pct + '%)';
    btn.className = top > 200 ? 'to-top ring show' : 'to-top ring';
  });
  btn.addEventListener('click', function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
})();

conic-gradient で読了率を可視化

スクロール量をページ全体の高さで割ると「今どこまで読んだか」の割合（%）が求まる。その値を conic-gradient の色の境目に渡すと、円グラフのようにリングが伸びていく。中央の ring-inner を背景色で塗りつぶすことでドーナツ状の進捗リングになる。戻るボタンと読了ゲージを兼ねられるので、長い記事ページと相性が良い。

デモについて：本来この UI は position: fixed でページ全体のスクロールに反応します。上のデモでは動作を分かりやすく見せるため、枠内のスクロール領域で再現しています。コピペ用コードはページ全体（window）で動く実用版です。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

トップへ戻るボタン 実装解説｜Scroll to Top Button Guide

トップへ戻るボタン デザイン見本

① 基本のトップへ戻るボタン（スクロールで出現）

② デザインのバリエーション（形・色・ラベル）

③ スクロール進捗リング付き

トップへ戻るボタン実装解説｜Scroll to Top Button Guide

トップへ戻るボタンデザイン見本