position: fixed 是唯一靠谱的选择，因其使元素脱离文档流并相对于视口定位，滚动时位置恒定；而 absolute 受父容器 transform/overflow 干扰，sticky 在 iOS Safari 对 body 无效且依赖滚动容器边界。
必须用 position: fixed，其他定位方式在真实场景中大概率失效。
为什么 position: fixed 是唯一靠谱的选择
它让元素脱离文档流、直接相对于视口定位，滚动时位置恒定。用 position: absolute 会受父容器 overflow 或 transform 干扰——比如父元素加了 transform: translateZ(0)，浏览器就会把 fixed 降级为 absolute，按钮一滚就消失；position: sticky 在 iOS Safari 对 body 不生效，且依赖滚动容器边界，一旦页面用了 div#scroll-container 这类自定义滚动区，它根本不会触发。
常见错误现象：sticky 按钮在 iPhone 上完全不出现；absolute 按钮在局部滚动区域里“粘不住”，安卓 WebView 中错位；fixed 按钮被 overflow: hidden 父容器意外裁剪（iOS Safari 仍可能裁切）。
bottom 和 right 怎么设才不出问题
别只写 bottom: 0 或 right: 0——移动端虚拟键盘弹出、地址栏收起时 viewport 高度突变，bottom: 0 容易被遮挡；也不要用 left 或 top 混搭，旧版 Safari 可能默认把 left 算成 0，按钮跑左边去。
立即学习“前端免费学习笔记（深入）”；
- 安全起点是
bottom: 24px、right: 24px，留出点击安全间距 - 如果按钮是
<img>或<svg>，加display: block，避免行内元素基线对齐导致视觉“飘高” - 务必显式设置
z-index: 999或更高，否则可能被弹窗、广告层、sticky导航盖住 - 避免父容器有
overflow: hidden——虽然fixed脱离文档流，但 iOS Safari 仍可能裁剪它
显隐控制必须靠 JavaScript，纯 CSS 不行
纯 CSS 无法感知滚动位置或方向，:hover 和 @media 都不适用。必须监听 window.onscroll 或用 IntersectionObserver，但后者在 Safari 旧版本对 document.body 支持不稳定，建议显式传 { root: null }。
阈值推荐 window.scrollY > 300，太低（如 100）会让用户刚下滑就看到按钮，干扰首屏体验。
- 滚动监听必须节流：用
requestAnimationFrame包裹判断逻辑，别在onscroll里反复读scrollY，低端安卓设备会明显卡顿 - 判断条件别只比大小，加位移差防抖：
if (scrollY > lastScrollY + 5 && scrollY > 300)才显示，else if (scrollY 才隐藏
点击返回顶部，window.scrollTo 怎么写才稳
直接 window.scrollTo(0, 0) 会生硬跳转；document.body.scrollTop = 0 不跨浏览器统一，且不支持平滑；scroll-behavior: smooth 设在 html 上虽简单，但无法动态开关，且 Safari 15.4 之前不支持。
- 首选
window.scrollTo({ top: 0, behavior: 'smooth' })，兼容性好、行为可控 -
document.body.scrollIntoView({ behavior: 'smooth' })在部分安卓 WebView 中有偏移 bug - 移动端须保证点击区域 ≥ 44×44px，并添加
touch-action: manipulation和:active反馈
真正容易被忽略的不是怎么写，而是 fixed 按钮在 iOS 键盘弹出后 viewport 高度突变导致的误判，以及 transform 父容器引发的降级失效——这两点不排查，调试再久也找不到根因。
