要实现“小火箭升空”动画效果，需用 CSS @keyframes 配合 transform: translateY()、scale() 和 opacity 实现带缓动的垂直升空轨迹，并与 scrollTo({ behavior: 'smooth' }) 同步时长（如 400ms），同时确保 SVG 火箭图标内联、fixed 定位、触控适配及动画结束后重置状态。
点击按钮时火箭图标向上飞出，不是简单跳转到顶部
要实现“小火箭升空”动画效果，核心是用 transform: translateY() 配合 transition 或 @keyframes 控制位移，而不是仅靠 window.scrollTo() 跳转。很多人误以为加个图标+滚动就完事，结果只有滚动没动画——那只是“返回顶部”，不是“升空”。
- 火箭图标建议用 SVG 内联写入，方便控制颜色、尺寸和动画锚点
- 动画触发时机必须绑定在按钮点击后，而非页面滚动时自动播放
- 升空路径应从按钮位置垂直向上，避免横向偏移或旋转干扰视觉焦点
用 CSS @keyframes 实现真实升空轨迹
单纯线性上升太假，加一点缓动和“加速-减速”更像火箭：离地时慢（推力积累），中途快（主推进），快到顶部时略减速（姿态调整）。用 @keyframes rocket-fly 定义三段位移：
```css
@keyframes rocket-fly {
0% { transform: translateY(0) scale(1); opacity: 1; }
50% { transform: translateY(-120vh) scale(1.1); }
100% { transform: translateY(-150vh) scale(0.9); opacity: 0; }
}
```-
120vh和150vh确保飞出视口，避免半截卡在顶部 -
scale()模拟加速膨胀感，再轻微缩小模拟远去，比纯位移更可信 - 动画结束后需手动重置元素状态（比如
display: none），否则 DOM 中仍占位
JavaScript 控制动画播放与滚动同步
动画和滚动不能割裂：火箭飞到一半，页面还没滚到顶，体验就断了。必须让 scrollTo 和动画共用同一时间曲线。
- 推荐用
scrollTo({ top: 0, behavior: 'smooth' })，其默认缓动函数与 CSSease-out接近，可直接复用 - 动画时长设为
400ms，和scrollTo默认时长一致，避免不同步 - 不要用
setTimeout延迟启动动画——滚动开始后立刻触发动画，靠animationend事件清理 DOM - 记得给火箭容器加
position: fixed和z-index，否则滚动时可能被其他元素遮挡
移动端点击区域小、动画易卡顿的应对方式
小火箭按钮在手机上常被误点成链接或触发双击缩放，且低端机上 transform 动画掉帧明显。
立即学习“前端免费学习笔记（深入）”；
- 按钮最小尺寸设为
48px × 48px，符合 WCAG 触控标准 - 动画只对
transform和opacity做，避开top/left触发重排 - 加
will-change: transform, opacity提前告知浏览器优化，但仅在点击瞬间添加，避免长期开销 - 旧版 Safari 对
@keyframes有兼容问题，可降级为 JS +requestAnimationFrame驱动，但绝大多数现代项目无需 fallback
真正难的是让升空节奏和滚动手感严丝合缝——差 50ms 就觉得“火箭飞走了，页面才慢慢上来”，这个细节调试没法靠模板解决。
