やってみよう下までスクロールすると右下に「↑」が出てきます。押してみてください
スクロールメジャー（よく見る）
トップに戻るボタン
Back to Top Button / Scroll to Top
下の方までスクロールすると「↑」ボタンが出てきて、押すと一番上までスーッと戻る。
別名ページトップボタンスクロールトップ上に戻るボタンページの先頭へ
どこで使われている？
- よく見かける場所
- ブログ、ニュースサイト、ネット通販の長い商品一覧
- 使うとよい場面
- とても長いページで、一番上のメニューにすぐ戻ってほしいとき
- 避けたい場面
- 短いページ
補足iPhoneでは、画面最上部（時計のあたり）をタップしても一番上に戻れます。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「トップに戻るボタン（Back to Top Button / Scroll to Top）」を実装してください。
動き：一定量より下にスクロールしたら、画面右下に「↑」の丸いボタンをフェードインで表示する。押すとページの一番上までなめらかにスクロールして戻り、上の方ではボタンを隠す。
使う部品：window.scrollTo({ top: 0, behavior: "smooth" })もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | window.scrollTo({ top: 0, behavior: "smooth" }) |
|---|---|
| iPhoneアプリなら | ScrollViewReader + proxy.scrollTo(...) |
| Androidアプリなら | LazyListState.animateScrollToItem(0) |
| Flutterなら | ScrollController.animateTo(0, ...) |
| React Nativeなら | FlatList の ref.scrollToOffset({ offset: 0 }) |