スクロールトップボタン

解説

スクロールトップボタンは、ページを少し下へスクロールすると右下にふわっと現れ、押すと先頭まで滑らかに戻る丸いボタンです。JavaScript は scroll イベントで現在位置を見張り、一定量を超えたら hidden 属性を外して表示し、クリック時には scrollTo の behavior:"smooth" で滑らかに最上部へ戻します。スクロール監視は passive 指定でブラウザの描画を妨げにくくしています。見た目は position:fixed で右下に固定し、opacity と transform の transition でじわっと現れます。

使うと便利な場面

• 記事や一覧など、縦に長くなりがちなページ
• 無限スクロールで下まで読み進むサイト
• スマホで上部のメニューへ素早く戻したいとき

出現する位置のしきい値は監視している数値を、ボタンの色は background を、大きさは width と height を変えて調整します。アクセシビリティ面では aria-label で用途を伝えており、hidden 属性を使うことでキーボード操作の対象からも適切に外れます。装飾の矢印は文字実体参照で表現しています。