锚点跳转生硬闪动需用html{scroll-behavior:smooth}或window.scrollto({behavior:'smooth'})实现平滑滚动，配合滚动阈值控制回到顶部按钮显隐，并避免主线程阻塞以保障动画流畅。
点击锚点跳转时页面生硬闪动
默认的 #top 锚点跳转没有过渡，视觉上就是“啪”一下跳到顶部，用户感知差。这不是 bug，是浏览器默认行为——它压根不触发滚动动画。
解决办法是用 CSS 的 scroll-behavior 属性，加在根容器上就行：
html {
scroll-behavior: smooth;
}
注意：只对原生锚点跳转（比如 <a href="#header"></a>）和 element.scrollIntoView() 生效，对 window.scrollTo() 默认不生效（除非手动传参数）。
- 必须写在
html元素上，写在body无效 - IE 完全不支持，Edge 79+、Chrome 61+、Firefox 68+、Safari 15.4+ 支持
- 如果页面用了
transform或perspective触发了新的层叠上下文，可能干扰 smooth 行为
JavaScript 调用 window.scrollTo 没有动画
直接写 window.scrollTo(0, 0) 会立刻跳顶，毫无过渡。想加动画，不能只靠 JS 控制坐标，得靠滚动行为配置或 API 参数。
立即学习“前端免费学习笔记（深入）”；
最简方案是传入 { behavior: 'smooth' } 选项：
document.getElementById('back-to-top').addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
这个 API 兼容性比 CSS 方案略差（Safari 15.4+ 才支持 behavior: 'smooth'），但好处是可控性强，能配合节流、判断滚动状态等逻辑。
-
behavior: 'smooth'在部分安卓 WebView 中表现不稳定，建议降级 fallback 到auto - 不要在滚动中反复调用，容易触发浏览器渲染抖动；可加
!isScrolling判断 - 若需兼容老浏览器，可用
scrollIntoView({ behavior: 'smooth' })配合一个隐藏的<div id="top"></div>元素
回到顶部按钮始终显示导致误触
按钮常驻页面右下角，但用户刚进页面就看到它，既没滚动也没必要出现，还占地方、干扰首屏体验。
应该用 window.scrollY 做显隐控制：
const backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
backToTop.style.display = window.scrollY > 300 ? 'block' : 'none';
});
阈值设成 300 是经验值：太小（如 50）会让轻微滑动就触发，太大（如 800）又延迟明显。也可以用 getBoundingClientRect().top 判断元素是否出视口，但开销略高。
- 别用
opacity或visibility单独控制显隐——要配合display: none真正移出布局流，避免影响无障碍阅读器 - 移动端要注意
scroll事件频繁触发，可加requestAnimationFrame节流，但阈值判断本身足够轻量，通常不用 - 如果用了 CSS
position: fixed，记得检查 z-index 是否被其他弹窗遮挡
动画卡顿或滚动跳变
常见于页面内有大量图片未懒加载、或存在强制同步布局（forced synchronous layout）的 JS 逻辑，比如在 scroll 回调里反复读取 offsetHeight。
smooth scroll 动画由浏览器合成器驱动，一旦主线程被 JS 阻塞，动画就会掉帧甚至中断。
- 确保回到顶部按钮的
click处理函数里没有重排（reflow）操作，比如读取clientWidth后立刻改样式 - 避免在
scroll事件中做 DOM 插入、复杂计算或触发重绘的样式修改 - 如果页面用了
will-change: scroll-position，反而可能干扰浏览器优化，一般不需要加
真正影响体验的往往不是“怎么加动画”，而是“动画发生时页面是否干净”。动效只是表象，底层性能才是关键。
