原生 window.scrollTo({top: 0, behavior: ‘smooth’}) 实现轻量平滑回顶，配合 scrollY + requestAnimationFrame 节流显示按钮，并用 class 切换与 pointer-events: none 确保兼容性与交互安全。
回到顶部按钮用 window.scrollTo() 最轻量
不用任何 JS 插件，原生 window.scrollTo() 就能实现平滑回到顶部，兼容现代浏览器（Chrome 61+、Firefox 68+、Safari 15.4+、Edge 79+）。很多项目硬上 jQuery 或第三方滚动库，纯属冗余。
关键参数就两个：top: 0 和 behavior: 'smooth'。示例：
document.getElementById('backToTop').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
- 不支持
behavior: 'smooth'的旧浏览器（如 IE 或早期 Android WebView）会自动降级为瞬间跳转，不影响功能 - 避免写成
window.scrollTo(0, 0)—— 这种老写法无法触发平滑动画 - 如果页面有固定 header，可微调
top值（如top: -80）避免被遮挡
隐藏按钮靠 scrollY 判断，别用 scroll 事件监听全量
常见错误是给 window 绑定 scroll 事件，每次滚动都执行 DOM 操作，造成卡顿。实际只需在滚动后“节流判断”，或改用 IntersectionObserver（但对简单场景太重）。
更省代码的写法：用 scrollY + requestAnimationFrame 防抖：
立即学习“前端免费学习笔记（深入）”；
function toggleBackToTop() {
const btn = document.getElementById('backToTop');
if (window.scrollY > 300) {
btn.style.display = 'block';
} else {
btn.style.display = 'none';
}
}
window.addEventListener('scroll', () => {
requestAnimationFrame(toggleBackToTop);
});
-
scrollY > 300是经验值，可根据首屏高度调整；别写死100或50，小屏设备容易误触 - 用
display: none/block而非opacity或visibility，减少重绘开销 - 如果按钮本身已用 CSS 定位（
position: fixed），确保z-index足够高，否则可能被遮住
CSS 隐藏逻辑必须配合 pointer-events 防误点
仅靠 display: none 隐藏按钮还不够。如果用户快速滚动又立刻点击，可能因渲染延迟导致按钮短暂闪现并响应点击——尤其在低端安卓机上。
