用 opacity + transition 实现返回顶部按钮淡入最轻量兼容，禁用 display: none 因其不可过渡且引发布局抖动；应通过 class 切换控制 opacity 与 pointer-events，并添加 will-change: opacity 防卡顿。
滚动监听中返回顶部按钮如何实现淡入动画
用 opacity + transition 是最轻量、兼容性最好的方式，不需要 JS 控制动画过程，只靠 CSS 状态切换就能触发淡入。
为什么不能直接用 display: none 切换
display 属性不可过渡，设成 none 后元素立即消失，transition 完全失效；同时它会脱离文档流，可能引起布局抖动。
推荐做法是始终保留元素在 DOM 中，仅控制视觉可见性：
- 初始状态设为
opacity: 0; pointer-events: none; - 显示时改为
opacity: 1; pointer-events: auto; - 必须配合
transition: opacity 0.3s ease-out;（写在默认状态上）
opacity 淡入在滚动监听里容易漏的关键点
JS 监听滚动时，常犯的错是每次触发都直接改 style.opacity，这会覆盖 CSS 中定义的 transition，导致动画不执行。
立即学习“前端免费学习笔记（深入）”；
正确做法是切换 class，让 CSS 自己接管过渡：
button.scrollToTop {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease-out;
}
button.scrollToTop.show {
opacity: 1;
pointer-events: auto;
}JS 里只做：button.classList.toggle('show', window.scrollY > 300);
移动端 Safari 和旧版 Chrome 的淡入卡顿问题
纯 opacity 在某些浏览器滚动中会被降级为非合成层，动画可能掉帧。加一行 will-change: opacity; 或 transform: translateZ(0); 能强制启用 GPU 合成。
但注意：
- will-change 不要长期开启，只在 .show 类里加
- transform: translateZ(0) 会轻微影响布局（比如改变行内对齐），建议优先用 will-change
示例修正：
button.scrollToTop.show {
opacity: 1;
pointer-events: auto;
will-change: opacity;
}淡入本身简单，真正卡住人的往往是 JS 频繁操作样式属性、或者没处理好 pointer-events 导致按钮能看见却点不了。
