底部悬浮条用 position: fixed + bottom: 0、left: 0、right: 0 实现；返回顶部用 window.scrollTo(0, 0) 或 scrollTo({top: 0, behavior: 'smooth'})；显隐判断用 getBoundingClientRect().top < 0；移动端点击区≥44×44px并加 touch-action: manipulation。
底部固定悬浮条用 position: fixed 实现
直接用 position: fixed 把容器钉在视口底部，不依赖页面高度或滚动事件。关键不是“贴着 body 底部”，而是“贴着浏览器窗口底部”。bottom: 0 是核心，同时必须设 left: 0 和 right: 0 来撑满宽度，否则可能只显示一小段。
常见错误是只写 bottom: 0 却没设宽，结果按钮缩成一个点；或者加了 margin: auto 导致居中失效。
-
position: fixed元素脱离文档流，不会影响其他内容布局 - 避免用
top: 100vh模拟底部——滚动时会错位，且在 iOS Safari 中有兼容问题 - 如果页面有 footer 且希望悬浮条在 footer 上方（非视口底部），那就不能用
fixed，得换监听 scroll 的方案
返回顶部按钮用 window.scrollTo(0, 0) 最稳妥
现代浏览器都支持 window.scrollTo(0, 0)，比 scrollTop = 0 更可靠，尤其在 Safari 和 iOS Webview 中。不要用 document.body.scrollTop = 0 单独赋值，它在某些情况下不触发重排，滚动无响应。
点击后立刻执行，无需防抖或节流——返回顶部是离散操作，不是高频事件。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
scrollTo({ top: 0, behavior: 'smooth' })可加动画，但注意 Safari 15.4 之前不支持behavior参数 - 如果要兼容老浏览器，先检测
scrollTo是否支持behavior，不支持就退回到无动画版本 - 别用
<a href="https://www.php.cn/link/6884af248368375ac72575ca240bb843"></a>—— 锚点跳转会改变 URL hash，还可能触发不必要的 history push
按钮显隐逻辑靠 getBoundingClientRect 判断更准
判断是否显示“返回顶部”按钮，最直接的方式是看页面顶部是否已滚出视口：用 document.documentElement.getBoundingClientRect().top。如果值小于 0，说明页面已向上滚动，顶部不可见，此时显示按钮。
不用 window.scrollY 或 pageYOffset 做阈值判断（比如 > 300px 才显示）——这样在短页面里按钮永远不出现，体验割裂。
-
getBoundingClientRect()返回的是相对于视口的位置，不受缩放、iframe 嵌套干扰 - 监听
scroll事件时，建议用requestAnimationFrame节流，避免频繁重排重绘 - 首次加载也要检查一次显隐状态，否则刷新后按钮可能卡在错误状态
移动端点击区域至少 44×44px
iOS 和 Android 都要求可点击元素最小触控尺寸为 44×44 CSS px，否则手指容易点歪。即使按钮图标只有 24×24，也得用 padding 或 min-width/min-height 把点击热区撑开。
别只靠 font-size 或 line-height 控制大小——它们对实际点击区域影响有限，尤其在 zoom 缩放后会失准。
- 用
padding比width/height更安全，能自适应文字变化 - 加
touch-action: manipulation可减少移动端 300ms 点击延迟 - 确保按钮有明确焦点样式（
:focus-visible），方便键盘用户操作
