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