悬浮按钮需用 position: fixed 定位右下角，尺寸48px、圆角50%、z-index: 1000；通过 window.scrolly > 300 控制显隐；点击执行 window.scrollto({ top: 0, behavior: 'smooth' })；须添加 aria-label、适配触屏与键盘访问，并对 scroll 事件节流。
悬浮按钮的 DOM 结构和基础定位
要让按钮始终固定在视口右下角，position: fixed 是唯一可靠方案。绝对定位（position: absolute）会随滚动消失，相对定位更不适用。
- 必须设置
bottom和right（或left），不能只设一个 - 推荐尺寸：宽高
48px，圆角50%，避免用百分比或em单位导致缩放异常 - 添加
z-index: 1000确保压过其他内容，但别设过高（如9999），否则可能干扰弹窗等组件
<button id="back-to-top" aria-label="返回顶部">↑</button>
用 window.scrollY 控制显示/隐藏逻辑
靠监听 scroll 事件 + 判断滚动距离来决定是否显示按钮，比 CSS :hover 或定时器更精准、低开销。
- 不要用
document.body.scrollTop或document.documentElement.scrollTop—— 浏览器兼容性差且行为不一致 - 统一用
window.scrollY（现代标准，所有主流浏览器支持） - 显示阈值建议设为
300（单位 px），太小会误触，太大则失去意义
示例判断逻辑：
const btn = document.getElementById('back-to-top');<br>function toggleBtn() {<br> if (window.scrollY > 300) {<br> btn.style.display = 'block';<br> } else {<br> btn.style.display = 'none';<br> }<br>}<br>window.addEventListener('scroll', toggleBtn);
点击后平滑滚动到顶部的实现要点
scrollTo 是最直接的方式，但默认是“瞬移”，需加 behavior: 'smooth' 才有过渡效果。
- 必须写成
window.scrollTo({ top: 0, behavior: 'smooth' })，不能只传0（那会回退到旧式跳转） - 部分老版本 Safari（behavior: 'smooth'，可降级为
scrollIntoView或忽略——没必要为极少数用户加 polyfill - 建议在点击后立即禁用按钮（
btn.disabled = true），防止连点触发多次滚动；滚动结束再恢复（可用scroll事件配合防抖判断）
无障碍与移动端适配容易被忽略的细节
这个按钮不是纯装饰，屏幕阅读器、键盘用户、触屏设备都要能正常访问。
- 必须带
aria-label（如aria-label="返回顶部"），不能只靠图标或文字内容 - 触屏设备上，
48×48px是最小推荐点击区域，iOS Safari 对小按钮有额外 padding 补偿，但 Android Chrome 不会，所以务必显式设置 - 键盘用户需要能
Tab进入、Enter或Space触发，确保button元素原生支持（不用div+role="button"自造） - 滚动中点击，部分安卓 WebView 会出现滚动卡顿，可在
scrollTo前加requestAnimationFrame微调时机
实际部署时，最常出问题的是 scroll 事件频繁触发导致性能抖动，记得节流（throttle）——哪怕只是简单用 setTimeout + 标志位挡一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
