返回顶部按钮必须用 JavaScript 实现：监听 scroll 事件动态控制显隐，用 pageYOffset 判断滚动距离，点击时调用 body.scrollIntoView({behavior:'smooth'})，CSS 使用 inset 和 scroll-margin-top 兼容 sticky 头部与 iOS 地址栏变化。
返回顶部按钮需要监听 scroll 事件，不是加个 <a href="#top"> 就完事
纯 HTML 锚点（比如 <a href="#top">返回顶部</a>）在现代页面中基本不可靠：滚动容器可能是 div 而非 document，页面有固定头部会遮挡，且无平滑滚动、无显示/隐藏逻辑。真正可用的返回顶部必须用 JavaScript 控制行为和时机。
window.addEventListener('scroll', ...) 是触发显示/隐藏的核心
按钮是否出现，取决于用户是否已向下滚动足够距离。不能写死 display: block，也不能靠定时器轮询。正确做法是监听 scroll 事件，动态计算 window.pageYOffset 或 document.documentElement.scrollTop：
let backToTop = document.getElementById('back-to-top');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTop.style.display = 'block';
} else {
backToTop.style.display = 'none';
}
});
- 用
pageYOffset兼容性更好，比scrollTop更稳定（尤其在 iOS Safari 中） - 阈值设为
300是经验值，太小易误触，太大影响体验 - 别用
getBoundingClientRect().top判断，它反映的是元素视口位置，不适用于“是否已滚动”判断
scrollIntoView({ behavior: 'smooth' }) 比 scrollTop = 0 更可靠
直接操作 document.documentElement.scrollTop = 0 在部分安卓 WebView 和旧版 Safari 中会失效或跳变；而 scrollIntoView 是标准 API，支持平滑滚动且兼容性足够好（IE 不支持，但 IE 已退出主流）：
document.getElementById('back-to-top').addEventListener('click', () => {
document.body.scrollIntoView({ behavior: 'smooth' });
});
- 目标元素用
body而非html，因部分浏览器对html的scrollIntoView行为不一致 - 不用
requestAnimationFrame手动做缓动，behavior: 'smooth'已封装好，更简洁 - 如果页面有 sticky header，可加
scroll-margin-top样式到body避免被遮挡，例如：body { scroll-margin-top: 60px; }
CSS 定位要避开移动端软键盘和 Safari 地址栏重绘干扰
用 position: fixed 是常规做法，但在 iOS Safari 中，地址栏收起/展开会触发 viewport 高度突变，导致按钮错位。解决方案是避免依赖 bottom + right 绝对定位，改用 inset：
立即学习“前端免费学习笔记（深入）”；
#back-to-top {
position: fixed;
inset: auto 20px 40px auto;
width: 48px;
height: 48px;
border-radius: 50%;
background: #333;
color: white;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 100;
}
-
inset: auto 20px 40px auto等价于top: auto; right: 20px; bottom: 40px; left: auto，但更语义化，且部分新 CSS 引擎对其优化更好 - 避免用
vh单位做垂直偏移，Safari 的vh在地址栏变化时不会实时更新 - 务必设
z-index，否则可能被弹窗、广告等遮盖
overflow-y: auto 的侧边栏）的情况。此时全局 window.scroll 不会触发，得监听具体容器的 scroll 并单独管理按钮状态。 
