※当サイトはアフィリエイト広告を使用しています。
ページの一番下まで読み進めた後、「上に戻る」までが遠い。
そんな小さなストレスを一発で解消するのがページトップボタンです。
実装はシンプル。<body>にアンカーを置き、そこへ内部リンクするだけ。
移動の“スルスル〜”はCSSのscroll-behaviorで完結します。追加ライブラリは不要。
アクセシビリティ配慮や、フッター手前での停止などの応用もこのページでまとめます。
結論（最短コード）
<body>にid="body"を付与し、href="#body"のリンクを置く。
滑らかスクロールはCSSで有効化。
<body id="body">
<!-- コンテンツ -->
<a class="pagetop" href="#body" aria-label="ページの先頭へ">
<!-- アイコンはお好みで。以下はSVG例（Font AwesomeでもOK） -->
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M12 5l-7 7h4v7h6v-7h4z"/>
</svg>
</a>
</body>
/* ネイティブの滑らかスクロール */
html { scroll-behavior: smooth; }
/* 動きを減らす環境設定への配慮 */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* ボタンの基本スタイル（右下に丸ボタン） */
.pagetop{
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1000;
width: 3rem; height: 3rem;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: green; color: #fff;
text-decoration: none; cursor: pointer;
outline: none;
}
.pagetop:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,.2); }
scroll-behavior: smooth;はスクロール所要時間の設定不可。
速度やイージングの調整が必要な場合はJavaScriptでの実装が必要です。
実装手順
HTML
<body id="body">を付与href="#body"のリンクを設置- アイコンはSVGでも、Font AwesomeなどのアイコンフォントでもOK
CSS
html { scroll-behavior: smooth; }を指定prefers-reduced-motionで動きを無効化できるようにしておく- ボタンの配置と見た目を整える
デザイン例
.pagetop{
position: fixed;
right: 1rem;
bottom: 1rem;
width: 3rem; height: 3rem;
display: flex; align-items: center; justify-content: center;
border-radius: 9999px;
background: green; color: #fff;
text-decoration: none;
}
.pagetop:hover { filter: brightness(1.05); }
.pagetop:active { transform: scale(0.98); }
使い勝手を上げる小ワザ
フッター手前で追従を止める
フッターの文字と被らせたくない場合は、ボタンを<footer>直前に置き、position: stickyへ。
<body id="body">
<!-- コンテンツ -->
<a class="pagetop pagetop--sticky" href="#body" aria-label="ページの先頭へ">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M12 5l-7 7h4v7h6v-7h4z"/>
</svg>
</a>
<footer>…</footer>
</body>
.pagetop--sticky{
position: sticky;
bottom: 1rem;
margin: 0 1rem 1rem auto; /* 右下寄せ */
}
stickyは指定位置を越えるとそこで止まるため、フッター手前で自然に固定されます。
固定ヘッダー分の余白を調整する
目的要素側にscroll-margin-topを付与。
.section-title { scroll-margin-top: 80px; }スクロール端の引っかかり制御
ページ全体にoverscroll-behaviorを設定。
html { overscroll-behavior: none; }キーボード操作対応
ボタンにaria-labelを付与し、:focus-visibleでフォーカスリングを明確化。
まとめ
ページトップボタンは、HTMLでアンカーを置き、CSSのscroll-behaviorを有効化すれば完成します。
追加ライブラリはいりません。
「フッター手前で止めたい」などの要件もposition: stickyで対応可能です。
一方で、スクロールの所要時間やイージングの細かな調整はCSSだけでは不可です。
必要ならJavaScriptで実装します。
まずは上記の最短コードで導入し、デザインや配置をプロジェクトに合わせて微調整してください。
使用サーバー
使用テーマ
