纯 css transition 无法驱动滚动动画，因其仅作用于可动画的 css 属性，而 scrolly/scrolltop 非 css 属性；正确方案是使用 scroll-behavior: smooth，配合 transition 控制按钮显隐等 ui 动效。
纯 CSS transition 本身不能直接驱动滚动行为——它只作用于可动画的 CSS 属性（如 opacity、transform、left），而 window.scrollY 或 scrollTop 不在其中。想靠 transition 实现“滚动动画”，必须配合其他机制，否则会失效或静默忽略。
为什么 transition 对 scroll 没用
transition 监听的是 CSS 属性变化，但原生滚动位置（scrollY、scrollTop）不是 CSS 属性，无法被 transition 捕获。你写 transition: scroll-y 0.3s 是无效语法，浏览器直接忽略。
常见错误现象：
- 给 body 或 html 加 transition: transform 0.3s，再用 JS 改 style.transform = 'translateY(-100px)' 模拟滚动 → 这不是真滚动，会破坏锚点、getBoundingClientRect() 计算、IntersectionObserver 行为；
- 尝试给 scrollTop 赋值并期望 transition 生效 → 无任何动画，值瞬间变更。
真正起效的平滑滚动方案：scroll-behavior
浏览器原生支持的 scroll-behavior: smooth 才是解决“滚动动画”的正确路径，它不依赖 JS，也不需要 transition 参与。
- 只需一行 CSS：
html { scroll-behavior: smooth; } - 之后所有锚点跳转（如
<a href="#top"></a>）和element.scrollIntoView({ behavior: 'smooth' })都自动带动画 - 兼容性：Chrome 61+、Firefox 36+、Edge 79+、Safari 14+、iOS 13+、Android 5+
- 注意：必须设在
html元素上，设在body无效
transition 能用在哪？只负责按钮显隐动画
transition 的合理角色是控制“返回顶部按钮”自身的出现/消失动效，比如淡入、上滑、缩放，而不是滚动过程。
- 典型用法：
.back-to-top-btn { opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } - JS 控制显隐时，只改
opacity和transform，transition自动生效 - 别试图用
transition控制按钮的top值来“模拟滚动”——fixed 定位下top变化不会触发真实滚动，且移动端 Safari 对top+transition有渲染 bug
scroll-behavior + transition 组合才是完整体验
一个丝滑的返回顶部功能，其实是两个独立动画层的协作：
- 滚动动画层：由
scroll-behavior: smooth或window.scrollTo({ behavior: 'smooth' })提供 - UI 动画层：由
transition控制按钮的opacity、transform等，增强反馈感 - 两者互不干扰：一个管滚动，一个管按钮，强行让
transition承担滚动职责只会引入兼容性问题和不可预测的布局抖动
最容易被忽略的一点：scroll-behavior: smooth 在用户启用了系统“减少运动”偏好（prefers-reduced-motion: reduce）时会自动退化为 auto，这是浏览器默认行为，无需额外 JS 检测——但如果你用 JS 手写 scrollTop 动画，就得自己处理这个逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
