scroll-linked动画在移动端返回顶部按钮上不可用，因ios safari完全不支持scroll-timeline和view-timeline，android chrome需开启实验标志；应改用throttled window.onscroll + window.scrolly判断并配合opacity/visibility transition实现可靠淡入淡出。
scroll-linked动画在移动端返回顶部按钮上为什么用不了
因为目前（截至2024年中）scroll-timeline 和 view-timeline 在 iOS Safari 中**完全不支持**，Android Chrome 虽支持但需开启实验性标志（chrome://flags/#scroll-linked-animations），线上项目无法依赖。所谓“配合 scroll-linked 动画实现淡入淡出”，现阶段只是理论可行，实际部署会直接降级为无动画或 JS 驱动。
用 window.onscroll + getBoundingClientRect() 判断滚动位置更可靠
返回顶部按钮是否显示，本质是判断页面是否已向下滚动足够距离。用原生 JS 监听 scroll 事件并读取 window.scrollY 最直接：
-
window.scrollY > 300是常见阈值，避免用户刚滑动一点就触发，也避开部分 iOS Safari 的 scrollY 延迟上报问题 - 不要用
document.body.scrollTop或document.documentElement.scrollTop—— 在 iOS Safari 中它们可能始终为 0 - 加
throttle（如 60ms 间隔）防止频繁重排，尤其低端 Android 设备上容易卡顿 - 按钮的
opacity和visibility应同时控制：只改opacity仍占布局空间，影响点击热区
CSS 淡入淡出用 transition 就够了，别硬套 @keyframes
返回顶部按钮的显隐是二元状态切换（显示/隐藏），用 CSS transition 更轻量、更可控：
- 给按钮设置
transition: opacity 0.3s ease, visibility 0.3s，注意visibility本身不可过渡，但搭配opacity可实现视觉+交互双重生效 - 初始状态设为
opacity: 0; visibility: hidden;，JS 控制类名（如.show）切换时，只需在该类里写opacity: 1; visibility: visible; - 避免用
transform: translateY()做位移淡入——移动端合成层开销高，尤其配合will-change容易引发白屏或内存暴涨 - 按钮固定定位时，
bottom和right值建议用env(safe-area-inset-bottom)适配 iPhone X+ 系列刘海屏
iOS Safari 上 scroll 事件监听要防抖 + 被动模式
iOS Safari 对非被动 scroll 监听器会抛警告甚至阻断，且默认事件可能被延迟触发：
- 必须传
{ passive: true }给addEventListener('scroll', ...)，否则控制台报Unable to preventDefault inside passive event listener - 如果按钮需要响应点击后平滑滚动回顶部，
scrollTo({ top: 0, behavior: 'smooth' })在 iOS Safari 15.4+ 才稳定支持；旧版本得 fallback 到scrollTop = 0+requestAnimationFrame逐帧逼近 - 部分微信内置浏览器（X5 内核）会劫持
scroll事件，建议加一层setTimeout(..., 0)延迟读取scrollY，绕过其事件队列优化
真正难的不是让按钮淡入淡出，而是让这个动作在各种 WebView 里都“不闪、不卡、不误触”。iOS 的 scroll 行为、Android 的渲染管线、小程序容器的事件沙箱——这些才是落地时最常掉进去的坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
