用 position: fixed 而非 absolute 是因 fixed 相对视口定位、滚动不偏移，但需避免父级 transform 导致失效；window.scrollY 比 scrollTop 更可靠；scrollTo 必传对象并设 behavior: 'smooth'；防连点需 disabled 控制；iOS 需用 env(safe-area-inset-bottom) 适配键盘。
为什么用 position: fixed 而不是 position: absolute
因为 position: absolute 依赖最近的已定位祖先元素，一旦页面滚动或祖先加了 transform、filter 等属性，按钮就会跟着偏移甚至消失；而 position: fixed 直接相对于视口定位，滚动时位置恒定。但要注意：如果按钮挂载在某个带 transform: translateZ(0) 的容器里，fixed 会失效——必须把它直接放在 <body> 最外层，绕过所有可能触发新层叠上下文的父级。
window.scrollY 控制显隐比 scroll 事件监听更稳
监听 scroll 事件本身开销不小，但真正关键的是判断依据。别用 document.body.scrollTop 或 document.documentElement.scrollTop，它们在不同浏览器下返回值不一致，且在某些文档模式下为 0。统一用 window.scrollY（现代标准，Chrome 61+、Firefox 68+、Safari 15.4+ 全支持）。阈值设为 300px 是经验平衡点：太小（如 50）容易误显，太大（如 800）用户已滚远才出现，失去“快速返回”意义。
示例逻辑：
const btn = document.getElementById('back-to-top');
function toggleBtn() {
btn.style.display = window.scrollY > 300 ? 'block' : 'none';
}
window.addEventListener('scroll', toggleBtn);
点击后调用 window.scrollTo({ top: 0, behavior: 'smooth' }) 必须传对象
常见错误是写成 window.scrollTo(0, 0) 或 window.scrollTo(0)，这会触发瞬移式跳转，体验生硬。必须传入配置对象，且 behavior: 'smooth' 是必需字段。另外，别在 <head> 里提前执行这个函数——DOM 没就绪会静默失败；绑定在按钮 click 事件里最稳妥。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
防连点建议：
- 点击瞬间设
btn.disabled = true - 用
window.addEventListener('scroll', ...)配合简单防抖（比如 100ms 内只响应一次），检测到window.scrollY === 0后恢复disabled = false
iOS 和 Android 对 fixed 按钮的处理差异不能忽略
iOS Safari 在键盘唤起、地址栏收起时会重算视口高度，bottom: 20px 可能被顶出屏幕；Android Chrome 则不会自动补偿安全区域。解决方案是：
- 用
bottom: env(safe-area-inset-bottom, 20px)替代固定像素值 - 加
touch-action: manipulation防 iOS 300ms 点击延迟 - 确保最小点击区域 ≥ 48×48px，不要靠 CSS
padding“撑大” hit area，而是直接设宽高 - 禁用父级
transform同时，避免给按钮加will-change，否则可能意外创建新层叠上下文
真正难搞的不是写出来，而是按钮在各种滚动状态、键盘弹起、深色模式切换、缩放 150% 时仍可点、可读、不遮挡、不抖动——这些细节堆起来，才是生产环境里那个“看起来很简单的悬浮按钮”。
