トップへ戻るボタン
Back to top button
別名: トップに戻るボタン、ページトップへ戻る、Back to top、Scroll to top、Go to top
生態(さわってみる)
一言定義
長いページをスクロールした後、ページ最上部へワンクリックで戻れるようにする補助ボタンUI。
分類
使う場面
- 1画面を大きく超える長さのページで、先頭に戻る手間を減らしたいとき
- 無限スクロールなど、下までスクロールし続けるページ
避ける場面
- ページが短く、スクロールしてもすぐ先頭に戻れるとき
- すでにページネーションで区切られており、1ページの長さが短いとき
近縁種との比較
スティッキーヘッダーが常時ナビゲーションへのアクセスを維持する固定要素であるのに対し、トップへ戻るボタンはスクロールが一定量進んだ後にのみ現れ、先頭への復帰という単一の役割に特化する点で異なる。ページネーションによって一覧が固定ページに区切られている場合は1ページあたりのスクロール量が短くなるため、トップへ戻るボタンの必要性は相対的に下がる——両者は「長い一覧をどう扱いやすくするか」という同じ課題への異なるアプローチであり、併用も単独使用もされる。
実例リンク
アクセシビリティ
- role
- button要素。スクロール先の見出し等に tabindex="-1" を付与し、クリック後にフォーカスを移す
- キーボード操作
- Tabで到達しEnter/Spaceで実行。フォーカスはページ先頭のランドマークへ移動する
- 補足
- prefers-reduced-motion: reduceの場合はsmoothスクロールを無効化し、即座にジャンプさせる