Back to top button 返回顶部按钮
/BAK too TOP BUT-un/ · noun · 操作类模式 · #100
在长页面往下滚动一段后出现的小按钮，通常是角落里的一个向上箭头，点一下就回到页面顶部。省得用户再滚很久才能回到页头和导航。
别名：返回顶部按钮、回到顶部、返回顶部箭头、一键置顶。
你可能会这样叫它
- “右下角那个回到顶部的箭头”
- “滚下去才出现的向上按钮”
- “点一下回到最上面的按钮”
- “网页的置顶按钮”
……它的名字是 返回顶部按钮（Back to top button）。
常见问题
返回顶部按钮放在哪里合适？
通常放在右下角，访客往下滚动一段之后才出现。它适合很长的页面：文章、文档、搜索结果、长商品列表。保持小巧，不要挡住内容，也不要和客服聊天、浮动操作按钮等其他悬浮按钮叠在一起。
代码里叫什么
| Web (HTML / JS) | <a href="#top"> window.scrollTo({ top: 0, behavior: "smooth" }) |
|---|---|
| SwiftUI | ScrollViewReader ScrollViewProxy.scrollTo(_:) |
| UIKit | scrollsToTop iPhone 上点状态栏本身就能回到顶部 |
| Jetpack Compose | LazyListState.animateScrollToItem(0) |
| Android (Views) | RecyclerView.smoothScrollToPosition(0) |
| Flutter | ScrollController.animateTo(0) |
复制给 AI 编程工具
给这个长页面加一个返回顶部按钮：右下角一个带向上箭头的圆形按钮，访客往下滚动大约两屏后才出现。点击后平滑滚动到顶部（用户偏好减少动态效果时直接跳转），并把焦点移到页面顶部。给它一个无障碍名称，不要和 Cookie 横幅或客服聊天按钮重叠，在手机上不要挡住内容。