长文章、文档、帮助中心、长后台表单、长商品列表——用户大概率离开顶部较远，需要快速回去。
界面与交互 · 导航结构
返回顶部BackTop
与滚动位置联动的回顶控件：滚过阈值淡入、点击平滑回顶并淡出，只改滚动位置，不清筛选、不抢焦点。
返回顶部按钮与滚动位置联动
亲手在长文章区里向下滚动、点返回顶部，看按钮何时淡入淡出、进度条与百分比如何同步、回顶是否清空已读勾选——结果都长在物件上。
第 0 步：这是一段固定高度、可以内部滚动的长文章。向下滚（或点「模拟向下滚动」）——滚过 120px 阈值时，右下角红色「返回顶部」按钮淡入出现，顶部进度条与「已滚动 X%」跟着变；点它，滚动区平滑回顶、按钮淡出、进度归零。勾上第 5 节的「已读」再回顶，勾选仍在——回顶不清状态。
阅读进度已滚动 0%
组件使用指南 · 共 8 节
1. 先看页面够不够长
返回顶部不是每个页面都需要；内容短到一屏放得下时，浏览器滚动条本身已经够用。
2. 阈值要稳定
滚过固定阈值（这里用 120px）再出现，避免一点点抖动就让按钮反复闪进闪出。
3. 贴边不挡主任务
浮动在右下角，避开固定导航、提交按钮和正文关键操作；窄屏也要留出触控空间。
4. 平滑而非瞬切
点击后平滑滚回顶部，让用户感知位置移动；开启减少动态效果的用户直接瞬时回顶。
5. 不重置用户状态
回顶只改滚动位置，不清空筛选、不重置已读勾选、不抢键盘焦点——下面可以亲手验证。
6. 键盘可达
用真实 button，aria-label 写清「返回顶部」，Tab 能聚焦、Enter / Space 能激活。
7. 出现与消失要平滑
用 opacity + transition 渐入渐出，不要突变闪现，避免遮挡瞬时内容。
8. 窄屏不挤
小屏仍贴右下、保留足够触控目标，不和底部固定栏或 cookie 横幅打架。
scrollTop 0px · 阈值 120px · 按钮未出现
对照：滚动区目前在顶部（scrollTop 0px），返回顶部按钮未出现。原因：阈值 120px 以下按钮隐藏，避免遮挡正文。下一步：在文章区向下滚动，或点「模拟向下滚动」，看右下角按钮何时淡入、顶部进度条与「已滚动 X%」如何同步变化。
面板教会的知识点
把刚才在长文章上看到的现象命名为六条规则。
- 阈值出现：scrollTop 超过固定阈值（这里 120px）才淡入；以下隐藏，避免遮挡正文。
- 进度条同步：顶部进度条宽度与「已滚动 X%」随 scrollTop 实时变化，让用户知道自己离开顶部多远。
- 平滑回顶：点击后
scrollTo({ top: 0, behavior: "smooth" })让滚动位置渐变，用户能感知位置移动。 - 回顶后自动消失：scrollTop 跌破阈值后按钮淡出、进度归零，不需要手动隐藏。
- 不重置用户状态：回顶只改滚动位置，已读勾选、筛选、分页、输入都不被动（面板里勾选验证）。
- 键盘可达：真实
button+aria-label="返回顶部"，Tab 聚焦、Enter / Space 激活；隐藏时tabIndex=-1不抢焦点。
什么时候用返回顶部
从内容长度和用户行为判断，不是「顺手加一个」。
短页面一屏放得下（浏览器滚动条够了）；已有吸顶导航能回顶（重复）；无限流式加载（用加载更多 / list，回顶没意义）；弹窗内滚动（先关弹窗）。
怎么用：从监听到归零的最短路径
一次到位的实现顺序。
- 选滚动源：监听真正滚动的容器（整页 window 或某个 overflow:auto 的内层），不要监听错对象。
- 定阈值：常见 120–400px 或两屏；超过才显示，用 opacity + transition 渐入，不要瞬切。
- 给真实 button：aria-label="返回顶部"，放在右下角 fixed 或 absolute，避开主 CTA 与固定栏。
- 点击回顶：
scrollTo({ top: 0, behavior: "smooth" })；只改滚动位置，不清筛选、不抢焦点。 - 处理减动效：prefers-reduced-motion 时用
behavior: "auto"，按钮淡入淡出也改为瞬时。 - 隐藏时不可达：按钮 opacity:0 时配 visibility:hidden + tabIndex=-1 + aria-hidden，避免 Tab 聚焦到看不见的按钮。
同一长文章的正反例
目标都是给长文加返回顶部。差别只在阈值、过渡和是否清状态。
滚过 120px 阈值淡入（opacity 过渡 200ms）；点击平滑回顶；回顶后按钮淡出、进度归零；已读勾选和筛选都不动；真实 button、aria-label、键盘可达。
用户随时一键回去，按钮不抢戏、不清状态。页面一加载按钮就出现、挡住正文；点击瞬切无过渡；回顶顺手清空了筛选；按钮是个 div，键盘根本到不了。
按钮成了干扰，回顶还丢了用户已经做的选择。快速自测
长后台表单里，用户滚到第 8 个字段后点「返回顶部」。下列哪种实现不会让用户丢掉已填内容？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。