position: fixed 是实现右下角返回顶部按钮的唯一可靠方式，需设 right: 20px、bottom: 20px，配合 scrollY 判断显示、scrollTo({top: 0, behavior: 'smooth'}) 实现平滑返回，并添加 aria-label 保障无障碍。
用 position: fixed 实现右下角定位
返回顶部按钮必须脱离文档流、不随滚动偏移，position: fixed 是唯一可靠选择。绝对定位（position: absolute）在滚动时会丢失位置，尤其在有复杂布局或动态内容的页面上极易失效。
关键点在于坐标设置：右下角 = right: 20px + bottom: 20px。不要用 left/top 计算，否则响应式下容易溢出或遮挡。
-
fixed元素以视口为参考，与父容器无关，无需担心外层overflow: hidden截断 - 建议加
z-index: 999，避免被弹窗、广告等覆盖（但别设过高，防止干扰调试） - 移动端需额外加
min-width: 44px; min-height: 44px，满足触控最小点击区域标准
用 window.scrollY 判断是否显示按钮
按钮不该始终可见——用户刚进入页面就看到返回顶部，体验突兀。应监听滚动位置，在页面向下滚动一定距离（比如 300px）后才显示。
window.scrollY 比 document.body.scrollTop 更可靠，后者在部分浏览器（如旧版 Safari）中可能为 0，即使页面已滚动。
立即学习“前端免费学习笔记（深入）”；
- 监听
scroll事件，但务必节流（例如用requestAnimationFrame或简单时间戳判断），否则频繁触发影响性能 - 推荐阈值设为
100~300，太小（如 10）会导致轻微滚动就出现，太大（如 800）会让用户找不到入口 - 隐藏逻辑用
element.style.display = 'none'或切换 class 控制，避免用visibility: hidden占据空间
用 scrollTo({ top: 0, behavior: 'smooth' }) 实现平滑返回
直接赋值 window.scrollTo(0, 0) 会瞬间跳转，破坏用户体验。behavior: 'smooth' 是现代标准，无需第三方库。
注意兼容性：IE 完全不支持，Android 4.4 及更早 WebView 也不支持。若需兼容，可降级为 scrollTop = 0（无动画），或引入轻量 polyfill（如 smooth-scroll-into-view-if-needed）。
- 不要用
animate({ scrollTop: 0 })—— jQuery 的 animate 在现代浏览器中已过时，且依赖 jQuery - 避免在
click回调里重复绑定/解绑事件，容易引发多次触发 - 点击后建议立即禁用按钮（
button.disabled = true），动画结束再恢复，防止连点导致异常
HTML 结构和基础样式示例
结构越简单越稳定，避免嵌套多余标签。下面这段可直接复制使用：
<button id="back-to-top" aria-label="返回顶部">↑</button>
<style>
#back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
border-radius: 50%;
background: #333;
color: white;
border: none;
cursor: pointer;
z-index: 999;
display: none;
}
#back-to-top:hover {
background: #555;
}
@media (max-width: 768px) {
#back-to-top {
right: 12px;
bottom: 12px;
width: 40px;
height: 40px;
}
}
</style>
<script>
const btn = document.getElementById('back-to-top');
const toggleShow = () => {
btn.style.display = window.scrollY > 300 ? 'block' : 'none';
};
window.addEventListener('scroll', toggleShow);
btn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
</script>
真正容易被忽略的是：按钮必须有 aria-label，否则屏幕阅读器无法识别功能；另外，如果页面用了 CSS reset 或 normalize，要确认 button 默认样式没被意外重置（比如去掉边框或背景）。
