直接用 window.scrollTo 会卡顿是因为默认 behavior 为 'auto'（瞬时滚动），需显式设置 behavior: 'smooth' 启用浏览器原生平滑动画；IE 不支持，Safari≤15.4 支持不稳定，可降级为 requestAnimationFrame。
为什么直接用 window.scrollTo 会卡顿，必须加 behavior: 'smooth'
很多同学复制了返回顶部按钮代码，点击后页面“啪”一下跳到顶部，没有动画——这是因为没启用原生滚动行为。现代浏览器支持 scrollTo 的 behavior 选项，但默认是 'auto'（即瞬时滚动）。设为 'smooth' 才触发 CSS 级别的平滑插值动画，无需额外 JS 动画库。
注意：IE 完全不支持该选项，Safari 在旧版本（≤15.4）中对 scrollTo 的 behavior 支持不稳定，若需兼容，得降级为 requestAnimationFrame 手动实现；但绝大多数当前项目可放心用原生方案。
- ✅ 正确写法：
window.scrollTo({ top: 0, behavior: 'smooth' }); - ❌ 错误写法：
window.scrollTo(0, 0);（无动画）或window.scrollTo({ top: 0 });（behavior缺失，默认仍为'auto'） - ⚠️ Safari 15.4 以下用户点击可能无动画，建议加简单降级检测（见下节）
小火箭图标怎么做到「悬停浮现 + 点击上升」且不遮挡内容
核心是用 position: fixed 定位 + z-index 层级控制，但容易踩两个坑：一是火箭盖住底部表单/弹窗，二是悬停动画触发时机错乱（比如鼠标从侧边移入时还没显示就点了）。
推荐结构：用一个 <button> 包裹 SVG 火箭图标，而非纯 <div>，这样语义正确、键盘可聚焦、无障碍友好。
立即学习“前端免费学习笔记（深入）”；
<button id="back-to-top" aria-label="返回顶部">
<svg viewBox="0 0 24 24" width="24" height="24">
<path d="M12 2L13.09 7.24L18.47 8.5L14.64 12.3L15.9 17.68L12 14.2L8.1 17.68L9.36 12.3L5.53 8.5L10.91 7.24L12 2Z"/>
</svg>
</button>
- 定位样式必须含
right: 24px; bottom: 24px;，避免用百分比或视口单位导致在小屏上偏移 -
z-index: 1000足够高，但别设成999999——防止和 Modal、Tooltip 冲突 - 悬停动画用
transform: scale(1.1)+transition: transform 0.2s ease，比改opacity更流畅（GPU 加速）
如何判断是否需要显示「返回顶部」按钮（避免永远挂着）
按钮不该一进页面就出现，否则干扰首屏体验。必须监听 scroll 事件，根据 window.scrollY 动态控制显隐——但直接绑定会导致频繁重排，尤其低端安卓机卡顿明显。
- ✅ 推荐做法：用
requestIdleCallback或节流（throttle），例如每 100ms 最多检查一次：if (window.scrollY > 300) { button.classList.add('show'); } else { button.classList.remove('show'); } - ⚠️ 别用
scrollY > 0作为阈值——用户轻微滚动（如看个 banner）就唤出按钮，体验突兀；300px是较稳妥的临界值（约半屏） - ⚠️ iOS Safari 中
scroll事件可能延迟触发，可配合touchmove补充监听（但仅限必要场景）
动画细节：火箭「喷火」效果用纯 CSS 实现是否可行
可以，但限制明显。常见做法是给 SVG 内部 <path> 添加 stroke-dasharray 和 stroke-dashoffset 配合 animation 模拟火焰抖动，但火焰形态固定、无法随滚动方向变化，且 Safari 对 SVG CSS 动画支持偶有 bug。
更轻量可靠的方案是：用伪元素 ::after 在按钮下方叠加一个带模糊的黄色渐变圆点，通过 transform: scaleY() 和 opacity 做脉冲动画——它不依赖 SVG 结构，兼容性好，CPU 占用低。
button#back-to-top::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
background: radial-gradient(circle, #ffcc00, #ff6600);
border-radius: 50%;
filter: blur(2px);
opacity: 0.7;
animation: flame-pulse 1.5s infinite ease-in-out;
}
真正难的是让「火箭上升」和「页面滚动」视觉同步——原生 scrollTo 的动画时长不可控（浏览器决定），所以不要试图用 JS 同步控制火箭位移。老老实实用 transform: translateY() 做个独立入场动画（比如从 100% 到 0），和滚动解耦，反而更稳。
