点击回到顶部图标无响应，主因是scrollTo平滑滚动兼容性差或事件绑定过早；应使用window.scrollTo(0,0)、fixed定位、html{scroll-behavior:smooth}、currentColor适配深色模式，并添加aria-label提升可访问性。
点击回到顶部图标为什么点不动？检查 scrollTo 兼容性和事件绑定时机
常见现象是图标显示了，但点击没反应——大概率是 scrollTo 在旧版 Safari 或 iOS WebView 中不支持平滑滚动，或者 JS 执行时 DOM 还没加载完。确保脚本放在 </body> 前，或用 DOMContentLoaded 包裹；更稳妥的做法是改用 window.scrollTo(0, 0)（所有浏览器都支持），而不是依赖 { behavior: 'smooth' } 参数。
- 如果必须用平滑滚动，加个兼容判断：
if ('scrollBehavior' in document.documentElement.style) { ... } - 别在
head里直接写内联onclick="scrollTo(...)"，容易因 DOM 未就绪而绑定失败 - 移动端要注意：某些 iOS 版本对
scrollTo的 y 值为 0 有延迟渲染问题，可加setTimeout(() => scrollTo(0, 0), 10)微调
图标位置总飘在页面中间或遮挡内容？用 position: fixed + bottom/right 精确控制
很多人用 absolute 或随便加 margin-top，结果一滚动就错位或被其他元素盖住。回到顶部按钮本质是「全局悬浮控件」，必须用 fixed 定位，并明确设置距离视口边缘的偏移量。
- 推荐样式：
position: fixed; bottom: 24px; right: 24px;（数值按设计稿微调） - 加
z-index: 99避免被弹窗、导航栏等覆盖 - 记得设
display: none初始隐藏，只在滚动超过阈值（如scrollTop > 300）时display: block，否则首屏就占地方
图标点击后页面跳得太生硬？用 CSS 控制滚动行为而非全靠 JS
把滚动动效交给 CSS 更稳定，JS 只负责触发。在 <html> 标签上设 scroll-behavior: smooth 是最简方案，比 JS 里写 behavior: 'smooth' 兼容性更好、代码更少。
- 只需一行 CSS：
html { scroll-behavior: smooth; }（注意不是body） - 这个设置影响整个页面的所有锚点跳转和
scrollTo，无需额外 JS 参数 - 若项目已有自定义滚动库（比如
locomotive-scroll），它会接管原生滚动，此时scroll-behavior失效，得查该库文档找对应 API
怎么让图标适配深色模式又不写两套 CSS？用 prefers-color-scheme 和 SVG 内联颜色
图标颜色随系统主题变，不是靠 JS 监听 matchMedia，而是纯 CSS 响应。SVG 图标内联 fill 色时，可以用 currentColor 继承父元素文字色，再配合媒体查询切换背景/文字色。
立即学习“前端免费学习笔记（深入）”；
- HTML 中放 SVG：
<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M..." /></svg> - CSS 中定义：
.back-to-top { color: #333; } @media (prefers-color-scheme: dark) { .back-to-top { color: #fff; } } - 避免用 PNG 图标——没法动态换色，还得准备两套资源
aria-label="回到顶部" 和 role="button"，否则屏幕阅读器用户不知道这是个操作按钮。这点不影响功能，但上线前常被跳过。 
