回到顶部
Back to Top Button
初级通用回到顶部（Back to Top Button）是让用户一键回到当前长页面或滚动区域起点的导航按钮。它解决读到下方后需要反复向上滚动的问题，比如在长篇帮助文档末尾返回开头。
你可能会说：「这个页面很长，我想让用户看到下面时，能点一下就回到开头，不用一直往上滑。」
动手看看帮助文档的回到顶部
拖动滚动位置，观察右下角按钮。可以悬停、按住或用 Tab 聚焦它；本沙盒用下方「模拟执行回到顶部」开关代替点击后的滚动逻辑。
未执行返回时，滚过 160px 就出现按钮。它固定在阅读区域右下角，不随正文移走，读到后面也容易找到。
要点回到顶部要先想清楚哪几个问题？
- 1
先确定要返回哪个起点
网页不一定只有整页在滚动。比如后台的侧栏固定、中间列表单独滚动，按钮就要控制中间列表；否则用户点了按钮，页面看起来可能毫无变化。
- 2
滚动一段距离再出现
用户刚打开页面时，本来就在顶部，这个按钮没有用处。等内容滚动到一定距离后再显示，可以少占一个位置；距离怎么定，我们可以按页面长度和实际使用情况调整。
- 3
让按钮能被看见和操作
按钮常放在视口边缘，方便滚到下方时找到它。但它不能盖住提交按钮或正文；只有向上箭头时，也要给辅助技术一个明确名称，让键盘和读屏用户知道它的作用。
- 4
返回方式照顾使用感受
点击后可以直接回到起点，也可以平滑滚动。如果页面很长，动画可能持续太久；如果用户偏好减少动效，我们可以改用直接跳转，让返回过程更可控。
容易混淆的地方
它和页内锚点都能改变滚动位置，但回到顶部只做一件事：返回当前滚动区域的起点；目录里的锚点则带你去指定章节。它也不是吸顶导航栏：吸顶导航栏让导航持续可见，回到顶部是在需要时提供一次返回操作。
什么时候用
适合用
- 做长篇帮助文档或产品说明页时，读者看到末尾后想回到开头找目录。
- 做持续加载的内容列表时，用户浏览了很多条，还想回到列表顶部调整筛选。
- 做后台里的独立滚动面板时，面板内容很长，用户需要快速回到该面板的起点。
不适合用
- 页面只有一两屏内容，向上滑一下就能回到开头时，不必再加一个按钮。
- 用户真正想去的是某个章节，不是页面开头时，用目录和页内锚点更合适。
- 任务是返回上一个页面而非当前页面顶部时，用返回导航，别让回到顶部承担这个功能。
练一练选一个答案，看看解释
你在做一个后台页面：顶部工具栏固定，中间的记录列表可独立滚动。用户滚到列表深处后，希望点一下回到第一条记录附近。你会怎么做？
让 AI 帮你做复制给 AI Agent 直接用
请在记录列表中加入回到顶部按钮：列表滚动一段距离后显示，点击后返回列表起点，不要滚动整个页面。按钮要有清楚的无障碍名称，避免遮挡列表操作；如果使用平滑滚动，请照顾偏好减少动效的用户。