window.scrollTo({ top: 0, behavior: 'smooth' }) 是最轻量兼容的平滑滚动方式，需传入 behavior 配置；CSS scroll-behavior: smooth 可全局启用锚点平滑滚动，但 IE 不支持且 Safari 旧版检测不准；返回顶部按钮需用 requestAnimationFrame 节流、合理显隐控制及无障碍适配。
点击按钮触发 window.scrollTo 实现平滑滚动
直接调用 window.scrollTo 是最轻量、兼容性最好的方式，不需要额外库。关键在于传入 { top: 0, behavior: 'smooth' } 配置对象——不加这个参数，默认是瞬间跳转。
-
behavior: 'smooth'在现代浏览器（Chrome 61+、Firefox 36+、Safari 15.4+）中生效；旧版 Safari 需要 fallback 到behavior: 'auto'或 CSSscroll-behavior - 不要用
scrollTo(0, 0)这种老式写法，它不支持behavior选项 - 如果页面有 sticky header，建议设
top: -document.querySelector('header').offsetHeight来补偿偏移
用 CSS scroll-behavior: smooth 全局启用
在 html 或 body 上设置该样式，能让所有原生锚点跳转（比如 <a href="#top">）自动带平滑效果，但只对 CSS 控制的滚动生效，不影响 JS 调用的 scrollTo（除非你没传 behavior）。
- 必须写在
html元素上才可靠，body上部分浏览器会忽略 - IE 完全不支持，且无法通过
@supports精准检测（Safari 15.2 及更早版本会误报支持） - 和 JS 的
behavior: 'smooth'不冲突，可共存；但若两者都启用，优先级由调用方式决定
返回顶部按钮 DOM 结构与显隐控制
按钮本身只是个 <button>，但它的显示逻辑容易出错：不能只靠 scrollY > 100 就显示，要考虑移动端缩放、iframe 嵌套、以及 iOS Safari 的地址栏隐藏导致的 scrollY 抖动。
- 监听
scroll事件时，用requestAnimationFrame节流，避免频繁重排 - 判断条件推荐用
window.scrollY > window.innerHeight * 0.3，比固定像素值更适应不同屏幕 - 按钮
position: fixed时，记得加z-index，否则可能被 modal 或 header 盖住 - 别用
display: none切换显隐——会导致按钮反复重排；改用opacity: 0; pointer-events: none;+ 过渡动画更顺滑
无障碍与键盘焦点问题
纯视觉按钮如果不处理 focus 状态，键盘用户按 Tab 会跳过它，或者聚焦后无样式反馈，违反 WCAG 2.1。
立即学习“前端免费学习笔记（深入）”；
- 按钮必须有
type="button"，否则在表单内可能意外提交 - 添加
aria-label="回到顶部"，避免屏幕阅读器读成“按钮”这种无意义内容 - 用
:focus-visible而非:focus控制焦点样式，防止鼠标点击时也出现虚线框 - 滚动完成前禁用按钮（
disabled或加pointer-events: none），避免用户连点触发多次滚动
实际最常被忽略的是 scroll-behavior 的浏览器支持粒度和键盘焦点的默认行为——很多人测试只用鼠标点，却没切到键盘模式验证 tab 键路径，上线后才发现辅助功能断层。
