纯HTML实现返回顶部需用指向带id="top"的顶部元素（不可设在），配合html{scroll-behavior:smooth}启用平滑滚动，固定按钮需设z-index≥100并处理iOS兼容性；JS仅在路由、IE兼容或动态偏移时必要。
怎么用 <a></a> 实现点击返回顶部
纯 HTML 就能做，不需要 JS：用 <a></a> 指向页面顶部的 id。前提是顶部元素（比如 <header></header> 或 <main></main>）有明确 id，例如 id="top"。
常见错误是直接写 <a href="#">返回顶部</a> —— 这会跳到页面开头但破坏浏览器历史、可能触发锚点失效，且在单页应用里容易出问题。
- 正确写法：
<a href="#top">返回顶部</a>，配合<div id="top"></div>或<header id="top"></header> - 不要把
id="top"放在上——部分浏览器不支持 body 级锚点跳转 - 如果顶部是固定定位的
<header></header>，跳转后内容可能被遮挡，需给#top元素加padding-top或margin-top补偿
为什么 scroll-behavior: smooth 必须配 CSS
HTML 锚点跳转默认是瞬移，要滚动动画必须靠 CSS，不是 JS 也不是 HTML 属性。
只加 scroll-behavior: smooth 到 html 或 body 就够了，但容易漏掉兼容性细节：
立即学习“前端免费学习笔记（深入）”；
- 必须写在
html元素上才稳定生效（body在某些 Chrome 版本下无效） - Firefox 68+、Chrome 61+、Safari 15.4+ 支持；IE 完全不支持，无降级方案
- 别在局部容器（如
overflow: auto的 div）上试——它只对整个视口滚动有效
示例：
html { scroll-behavior: smooth; }
position: fixed 按钮的定位和 z-index 坑
返回按钮通常固定在右下角，但“固定”不等于“一定可见”。
典型问题：按钮被其他元素盖住、在 iOS Safari 里闪动、滚动时错位。
- 必须设
z-index，且值要大于页面所有非static定位元素（建议 ≥ 100） - 避免用
bottom: 20px; right: 20px;同时设left或top—— 会导致在小屏或横屏下位置异常 - iOS Safari 对
fixed元素有渲染延迟，可加transform: translateZ(0)强制硬件加速 - 别忘了加
display: none媒体查询：在小屏（如max-width: 768px）下隐藏按钮，否则可能遮挡内容
要不要用 JS？什么情况真得上 window.scrollTo()
纯 HTML + CSS 能覆盖 90% 场景。JS 只在以下情况必要：
- 需要监听滚动位置、动态显示/隐藏按钮（比如滚过 300px 才出现）
- 要兼容 IE 或老 Android 浏览器（此时
scrollTo({ top: 0, behavior: 'smooth' })需降级为scrollTop = 0） - 页面用了前端路由（如 React Router），
href="#top"不触发滚动，必须手动调用scrollTo - 想控制滚动偏移（比如避开固定 header），就得用 JS 计算真实
top值再传给scrollTo
注意：scrollTo 在 Safari 15.4 之前不支持 behavior: 'smooth'，要用 polyfill 或回退逻辑。
