应使用 scrollTo(0, 0, { behavior: "smooth" }) 实现平滑滚动，配合 fixed 定位与 safe-area-inset-bottom 适配移动端，滚动后需将焦点移至顶部锚点以保障可访问性。
回到顶部按钮点击后页面跳转太生硬
默认用 window.scrollTo(0, 0) 或 location.hash = "#top" 会瞬间跳转，用户感知突兀，尤其长页面容易引发眩晕感。必须加滚动过渡。
推荐直接使用原生 scrollTo 的 behavior: "smooth" 选项，兼容性已覆盖 Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+。老版本 Safari（
- 写法：
window.scrollTo({ top: 0, behavior: "smooth" }); - 不要用
animate()或第三方库模拟滚动——原生 smooth 更省资源、更准、且支持系统级滚动惯性 - 若需监听滚动结束，注意
scroll事件不会触发“完成”信号，可用setTimeout估时（如 300ms 后执行），或监听scrollend（Chrome 113+、Safari 17.4+ 支持，暂不建议依赖）
按钮从隐藏到显示缺少渐变效果
单纯用 display: none / block 切换会让按钮“啪”一下弹出来，视觉断裂。要用 opacity + visibility 配合 transition 实现淡入淡出。
关键点：不能只设 opacity 过渡，否则元素仍占布局空间；也不能只靠 display，它无法过渡。必须组合控制。
立即学习“前端免费学习笔记（深入）”；
- CSS 示例：
.back-to-top { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .back-to-top.show { opacity: 1; visibility: visible; } - JS 控制时机：监听
scroll，当window.scrollY > 300时加show类；小于等于 300 时移除——避免在页面顶部就显示 - 慎用
transform: scale()等额外动画，易引发重排，低端机卡顿明显
按钮位置固定但遮挡内容或响应错位
常见写法是 position: fixed; bottom: 20px; right: 20px，但在 iOS Safari 或某些安卓 WebView 中，软键盘弹出、地址栏缩放、横竖屏切换时，fixed 容易错位或被截断。
更稳妥的做法是用 position: absolute + 容器 position: relative，或改用 position: fixed 但配合 inset 和媒体查询兜底。
- 推荐写法：
.back-to-top { position: fixed; inset: auto 20px 20px auto; /* 等价于 bottom: 20px; right: 20px; */ } - 加一层
z-index: 100，确保不被弹窗、广告等覆盖；但别设过高（如 9999），避免干扰其他交互层 - 移动端需测试刘海屏/全面屏：用
safe-area-inset-bottom适配底部安全区，例如bottom: calc(20px + env(safe-area-inset-bottom))
点击按钮后焦点丢失影响可访问性
平滑滚动完成后，焦点仍停留在按钮上，键盘用户按 Tab 会跳过顶部内容，直接进入下一个可聚焦元素，破坏阅读流。
必须在滚动结束时，将焦点转移到页面顶部容器（如 <main> 或 <header>），否则 WCAG 2.4.3 失败。
- 简单可靠做法：滚动后调用
document.getElementById("top-anchor").focus()，前提是页面有<div id="top-anchor" tabindex="-1"></div>（放在<body>开头） - 不要用
document.body.focus()—— body 默认不可聚焦，多数浏览器忽略 - 若用
scrollIntoView()替代scrollTo，注意它默认不触发focus，仍需手动补上
实际最易被忽略的是焦点管理——视觉上动效再顺滑，键盘用户卡在按钮上，整个“回到顶部”就失效了。
