回到顶部按钮应在滚动距离≥200px时显示，通过监听scroll事件、用requestAnimationFrame节流更新CSS变量--scroll-progress实现平滑渐入，兼容iOS Safari地址栏变化及跨浏览器scrollTop差异。
滚动距离超过阈值才显示按钮
回到顶部按钮不该一上来就霸占屏幕，得等用户真往下滚了一段距离再出现。核心是监听 window.onscroll 或用 IntersectionObserver，但最直接可靠的是读取 window.scrollY（或 document.documentElement.scrollTop，兼容 IE）。设个阈值，比如 200px：
- 用
scrollY >= 200判断是否满足显示条件 - 别用
body.scrollTop——在多数现代浏览器里它恒为 0，实际滚动值在documentElement上 - 首次加载时也要手动调一次判断逻辑，否则刷新后按钮可能卡在错误状态
CSS 中用自定义属性控制按钮位移
按钮的“动态位移”不是靠 JS 频繁改 top 或 transform，而是把滚动进度映射成一个 CSS 变量，让样式层自己算位置。例如：
button {
--scroll-progress: 0;
transform: translateY(calc(100vh * (1 - var(--scroll-progress)) + 20px));
opacity: clamp(0, var(--scroll-progress), 1);
}这里 --scroll-progress 是 0～1 的归一化值（scrollY / maxScroll），JS 每次滚动更新它，CSS 就自动响应。注意：
-
clamp()能避免透明度超出范围，比手写min/max更稳 - 别在
transform里直接拼字符串数值——必须用calc()和变量组合，否则无效 - 如果按钮要“贴底渐入”，位移公式得反向：滚动越深，
translateY越小
滚动过程中避免重排与抖动
频繁读写 DOM 会触发重排，尤其在滚动事件里。优化关键点就两个：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流，确保最多每帧更新一次变量：requestAnimationFrame(() => { document.documentElement.style.setProperty('--scroll-progress', progress); }) - 把按钮设为
position: fixed，并加will-change: transform（仅当需要平滑动画时），否则浏览器可能不启用合成层 - 别在滚动回调里操作
classList切换显隐——CSS 变量 +opacity+pointer-events组合更轻量
移动端 Safari 的 scrollY 偏移陷阱
iOS Safari 在地址栏收起/展开时，scrollY 会突变，导致按钮闪现或错位。不能只依赖绝对值：
- 监听
resize事件，在窗口高度变化时重置判断逻辑 - 用
document.scrollingElement.scrollHeight - window.innerHeight算出真实最大可滚动高度，而不是硬编码 - 对
scrollY做简单防抖：连续两次读值差小于 5px 才更新变量，过滤地址栏动画带来的毛刺
滚动深度驱动的 UI 变化，本质是把 JS 的状态感知和 CSS 的声明式渲染分开——变量只是桥梁，真正难的是边界处理和跨端一致性。
