fixed定位适合返回顶部按钮，因其脱离文档流、相对视口固定且不受父容器transform等影响；需显式设置right/bottom和z-index≥100，并配合smooth滚动、无障碍属性及移动端适配。
fixed定位为什么适合返回顶部按钮
因为 position: fixed 脱离文档流，始终相对于视口定位，滚动时位置不变——这正是悬浮按钮的核心需求。它不随页面滚动偏移，也不受父容器 transform、perspective 或 filter 影响（这些会让 position: absolute 失效），天然适配返回顶部这类全局操作。
基础样式必须设 right/bottom + z-index
只写 position: fixed 不够，浏览器默认按文档流位置渲染，按钮会堆在左上角且可能被遮挡：
-
right和bottom（或top/left）必须显式设置，比如right: 20px; bottom: 30px; -
z-index建议 ≥ 100，避免被模态框、导航栏等覆盖；若页面有深色背景，还要注意按钮颜色对比度 - 别忘了加
cursor: pointer，否则 hover 状态下没手型提示，用户感知弱
点击后平滑滚动到顶部的 JS 配合要点
CSS 只管“悬浮”，跳转逻辑靠 JS。关键不是用 window.scrollTo(0, 0)，而是用带行为控制的版本：
- 优先用
window.scrollTo({ top: 0, behavior: 'smooth' })，原生支持平滑滚动 - 旧版 Safari（≤15.4）不支持
behavior: 'smooth'，可降级为scrollIntoView({ behavior: 'smooth' })配合一个隐藏的id="top"元素 - 触发后建议禁用按钮 300ms，防止快速连点导致滚动中断或抖动
document.querySelector('.back-to-top').addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
this.disabled = true;
setTimeout(() => this.disabled = false, 300);
});
移动端和无障碍容易漏掉的细节
按钮在小屏上可能误触，又常被读屏器忽略：
立即学习“前端免费学习笔记（深入）”；
- 给按钮加
aria-label="返回顶部"，否则 VoiceOver/NVDA 只读“按钮” - 移动端建议最小尺寸 ≥ 44×44px（iOS 人机指南），可用
min-width/min-height或padding保证点击区域 - 避免用
fixed+bottom: 0紧贴屏幕底边，iOS Safari 地址栏展开时会遮住——留 10–20px 余量更稳妥
fixed 按钮看似简单，真正稳定可用的难点不在定位本身，而在滚动行为兼容性、触摸反馈精度和语义可访问性这三个地方。
