position: fixed 是唯一靠谱的选择，因其让元素脱离文档流、始终相对于视口定位，滚动时位置恒定；而 absolute 受父容器 overflow/transform 干扰，sticky 在 iOS Safari 对 body 失效且依赖滚动容器边界。
必须用 position: fixed，其他定位方式在真实场景中大概率失效。
为什么 position: fixed 是唯一靠谱的选择
它让元素脱离文档流、直接相对于视口定位，滚动时位置恒定。用 position: absolute 会受父容器 overflow 或 transform 干扰，一滚动按钮就消失；position: sticky 在 iOS Safari 对 body 失效，且依赖滚动容器边界——如果页面用了 div#scroll-container 这类自定义滚动区，它根本不会触发。
- 常见错误现象：安卓 WebView 中按钮错位、iOS 键盘弹出后按钮卡在错误位置、局部滚动区域里按钮“粘不住”
-
fixed的bottom和right值始终以 viewport 为基准，不随 DOM 结构变化偏移 - 务必显式设置
z-index: 999或更高，否则可能被弹窗、广告层、sticky 导航盖住
bottom 和 right 怎么设才不出问题
别只写 bottom: 0 或 right: 0——移动端虚拟键盘、地址栏收起时 viewport 高度突变，bottom: 0 容易被遮挡；也不要用 left 或 top 混搭，旧版 Safari 可能默认把 left 算成 0，按钮跑左边去。
- 安全起点是
bottom: 24px、right: 24px，留出点击安全间距 - 如果按钮是
<img>或<svg>，加display: block，避免行内元素基线对齐导致视觉“飘高” - 避免父容器有
overflow: hidden——虽然fixed脱离文档流，但 iOS Safari 仍可能裁剪它
显隐控制必须靠 JavaScript，纯 CSS 不行
纯 CSS 无法感知滚动位置或方向，:hover 和 @media 都不适用。必须监听 window.onscroll 或用 IntersectionObserver，但后者在 Safari 旧版本对 document.body 支持不稳定，建议显式传 { root: null }。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 阈值推荐
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' })，现代浏览器全覆盖 - 必须提前设
html { scroll-behavior: smooth }，否则behavior: 'smooth'会退化为跳转 - 如果用
element.scrollIntoView，注意祖先元素若有transform或filter，可能触发渲染层叠加，导致滚动终点偏移
真正麻烦的不是写几行 CSS，而是 viewport 高度突变、滚动节流精度、z-index 层级冲突这些细节——它们往往在上线后某个特定机型上才突然暴露。
