トップへ戻るボタン

Back to top button

長いページをスクロールした後、ページ最上部へワンクリックで戻れるようにする補助ボタンUI。

○ 使う場面

  • 1画面を大きく超える長さのページで、先頭に戻る手間を減らしたいとき
  • 無限スクロールなど、下までスクロールし続けるページ

× 避ける場面

  • ページが短く、スクロールしてもすぐ先頭に戻れるとき
  • すでにページネーションで区切られており、1ページの長さが短いとき

別名

トップに戻るボタン、ページトップへ戻る

近縁種との比較

名前の通り、クリック(タップ)した瞬間にページの一番上まで連れ戻してくれるという、機能と名称がそのまま一致した素直なUIである。多くは上向きの矢印一つだけで表現され、スクロールが一定量進むまでは画面に姿を見せない控えめな振る舞いも特徴である。

近縁種違い・使い分け
固定ヘッダー固定ヘッダーが常時ナビゲーションへのアクセスを維持する固定要素であるのに対し、トップへ戻るボタンはスクロールが一定量進んだ後にのみ現れ、先頭への復帰という単一の役割に特化する。
ページネーションページネーションで一覧が固定ページに区切られている場合は1ページあたりのスクロール量が短くなるため、トップへ戻るボタンの必要性は相対的に下がる。「長い一覧をどう扱いやすくするか」という同じ課題への異なるアプローチであり、併用も単独使用もされる。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション