ページトップへ戻るボタン
ページを下にスクロールすると右下にふわっと現れる「 トップへ戻る 」ボタンです。長い縦長ページで読者が最上部に戻りやすくし、離脱を減らす定番の UX 補助パーツです。 動きは軽量な JavaScript で制御しています。
解説
ページを下にスクロールすると右下にふわっと現れる「トップへ戻る」ボタンです。長い縦長ページで読者が最上部に戻りやすくし、離脱を減らす定番の UX 補助パーツです。
動きは軽量な JavaScript で制御しています。scroll イベントで window.scrollY を監視し、スクロール量が 200px を超えたらボタンに is-shown クラスを付けて表示、それ未満なら外して隠します。初期状態は opacity:0 と pointer-events:none で見えず押せない状態にしておき、表示時にだけ反応するようにしています。クリックすると scrollTo の behavior:"smooth" でなめらかに最上部へ戻ります。position:fixed なので常に画面の右下に固定されます。
使う場面とカスタマイズ
- 記事本文が長いブログ・オウンドメディアやFAQページ
- 商品が縦に続く一覧ページや、長い利用規約ページ
- 出現するスクロール量（200）や位置
bottom/right、ボタン色を調整
矢印記号の代わりにアイコン SVG を入れても構いません。aria-label を付けてあるので読み上げ環境でも用途が伝わります。スムーズスクロールを避けたい利用者には prefers-reduced-motion で瞬時移動に切り替えると親切です。
使用例・適したシーン
- 長文記事ページ
- ワンページ LP
- ドキュメントサイト
よくある質問
ボタンが現れるタイミングを変えるには
JavaScript 内でスクロール量のしきい値を 200 にしています。この数値を書き換えると表示タイミングが変わり、小さくすると早めにボタンが現れます。
スクロールがカクつかないか心配です
scrollイベントは頻繁に発火するため、処理が重いと負荷になります。このサンプルはクラスを付け外しするだけなので軽量です。さらに最適化するならrequestAnimationFrameやスクロール間引きを併用すると安心です。