トップへ戻るボタン

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スクロールを無効化し、即座にジャンプさせる