最可靠方式是 window.scrollTo({ top: 0, behavior: 'smooth' })；需注意 Safari 15.4- 和旧安卓 WebView 兼容性，IE 需 requestAnimationFrame 回退；按钮须用语义化 button、fixed 定位、44×44px 热区及 aria-label。
用 window.scrollTo() 实现平滑返回顶部最可靠
直接写 window.scrollTo(0, 0) 会硬跳，没动画；漏掉 behavior: 'smooth' 参数，Safari 15.4 以下和部分安卓 WebView 就静默退化为瞬移。必须显式传对象：window.scrollTo({ top: 0, behavior: 'smooth' })。
注意点：
- 别混搭
scrollIntoView()和scrollTop赋值，尤其页面有 sticky header 时容易滚过头 - 在 iframe 里调用需同源，否则抛
SecurityError - IE 完全不支持
behavior: 'smooth'，如仍需兼容，得 fallback 到requestAnimationFrame逐帧滚动（但 2026 年绝大多数项目已可放弃 IE）
按钮显隐逻辑别只监听 scroll 事件
高频滚动下反复读取 window.scrollY 会强制重排，低端 Android 设备明显卡顿。更轻量的做法是用 IntersectionObserver 监听一个占位锚点（比如 <div id="top-anchor" style="position: absolute; top: 300px;"></div>）是否离开视口顶部区域。
如果坚持用 scroll 监听，务必：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 用
window.pageYOffset（等价于window.scrollY），它只读、无副作用、全平台一致；别用document.body.scrollTop或document.documentElement.scrollTop，它们在不同浏览器中行为不统一 - 给
addEventListener('scroll', handler, { passive: true })加{ passive: true }，否则 iOS Safari 会警告并降级，导致滚动卡顿 - 首次加载后手动调用一次显隐函数，否则刷新页面按钮状态可能残留
HTML 结构和 CSS 定位最容易出问题
按钮必须是语义化 <button></button> 元素，带 id 和 aria-label="返回顶部"。用 <a href="#top"></a> 看似简单，但会改 URL、触发哈希变化，在单页应用里可能干扰路由，且 iOS Safari 对空锚点支持不稳定。
CSS 方面：
- 必须用
position: fixed，不是absolute——后者受父容器transform、perspective、filter影响，按钮常莫名消失 -
z-index至少设为100，否则容易被弹窗、广告、sticky header 遮挡 - 别用
visibility: hidden控制显隐，它仍占布局空间，影响fixed定位表现；应优先用display: none或opacity+pointer-events
移动端和无障碍细节常被忽略
一个合格的返回顶部按钮，在 iOS 和 Android 上点击热区至少要 44×44px，否则手指点不准；没有 aria-label 或聚焦态样式，就通不过 WCAG 2.1 和 Apple HIG 审查。
实操建议：
- 按钮内用 Unicode 箭头（如
↑）比文字“返回顶部”更省空间，也更适合小屏 - 加
:focus-visible样式，确保键盘用户能清晰看到焦点位置 - 不要把
id="top"放在上——部分浏览器不支持 body 级锚点跳转 - 如果全局开了
html { scroll-behavior: smooth }，所有锚点跳转都会变平滑，但可能和 Swiper、Tippy 等库冲突，上线前务必实测
