用 position: fixed 实现右下角悬浮按钮最简单可靠，需设置 right、bottom、z-index、cursor:pointer，确保尺寸≥48px×48px并用padding扩展热区，配合节流+requestAnimationFrame处理滚动显隐，兼顾无障碍（role="button"+aria-label+tabindex）。
用 position: fixed 实现右下角悬浮按钮
直接给按钮加 position: fixed，再配合 right 和 bottom 定位，是最简单可靠的方案。它不依赖父容器，也不受滚动影响，浏览器兼容性好（IE9+ 都支持）。
常见错误是误用 position: absolute——它会相对于最近的定位祖先元素，一旦页面结构变化或祖先加了 transform，按钮就可能“飘走”。
-
right: 20px和bottom: 20px是常用安全距离，避免贴边难点击 - 必须显式设置
z-index（比如z-index: 1000），否则可能被其他绝对定位内容遮盖 - 记得加
cursor: pointer，否则 hover 时没有手型提示，体验打折
按钮尺寸与点击热区要留够
移动端用户拇指操作多，右下角按钮如果太小，容易点空或误触。PC 端也建议最小尺寸不低于 48px × 48px，这是 WCAG 推荐的可点击区域下限。
实际中常遇到：图标只有 24px，但点击区域太小。解决方法不是放大图标，而是用 padding 扩展热区，同时用 box-sizing: border-box 保证尺寸可控。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
width: 56px; height: 56px; padding: 12px; box-sizing: border-box; - 避免只靠
font-size控制大小——文字缩放或系统字体设置会影响实际点击面积 - 如果用 SVG 图标，别忘了设
width/height或viewBox，否则在某些浏览器里会拉伸变形
滚动时隐藏/显示按钮的判断逻辑
有些场景需要“滚动到底部才显示”或“快速上滑时隐藏”，这时不能只监听 scroll 事件并立刻操作 DOM——高频触发会导致卡顿。
核心思路是节流 + 记录滚动方向。用 requestAnimationFrame 做轻量判断比 setTimeout 更稳妥，尤其在 iOS Safari 上。
- 关键变量：
let lastScrollTop = 0;和let ticking = false; - 在
scroll回调里只更新lastScrollTop，把真实 DOM 操作放到requestAnimationFrame里执行 - 判断方向用
window.scrollY > lastScrollTop，比deltaY更兼容旧浏览器 - 注意：iOS Safari 的
scrollY在地址栏展开/收起时会抖动，加Math.abs(delta) > 5过滤微小变化
无障碍与焦点管理别漏掉
悬浮按钮默认不在 DOM 顺序里，键盘用户按 Tab 可能直接跳过它。如果按钮有重要功能（比如“返回顶部”），必须让它可聚焦、可读取。
最简方案是加 tabindex="0"，但更规范的做法是用 role="button" + aria-label，尤其当按钮只有图标没文字时。
- 必须加
aria-label="回到顶部"（中文场景）或对应语义化描述 - 用
:focus-visible写焦点样式，避免鼠标点击时也出现难看的外框；回退到:focus要加outline: none后手动实现 - 如果按钮是纯装饰（比如客服头像），请加
aria-hidden="true"并确保tabindex="-1"，否则会干扰屏幕阅读器
右下角位置本身对键盘导航不友好——用户得按很多次 Tab 才到那儿。如果业务允许，考虑在页面加载后用 element.focus() 主动聚焦（仅首次，且需判断是否为键盘操作模式）。
