返回顶部功能需用window.scrollTo({top:0,behavior:'smooth'})，确保顶部有id="top"元素、链接href为#top、JS中调用event.preventDefault()；按钮显隐应requestAnimationFrame节流并用display控制，避免iOS兼容问题。
直接用 window.scrollTo() 配合 { behavior: 'smooth' } 就能实现，但要注意浏览器兼容性和锚点失效的常见原因。
为什么点击返回顶部没反应？
最常见的是目标元素缺失或 ID 不匹配。返回顶部本质是跳转到页面顶部的锚点，比如 <div id="top"></div>，但很多人漏写这个元素，或写成 class="top" 却用 #top 去匹配。
- 确保页面顶部存在一个带
id的空元素，如<div id="top"></div>（放在<body>开头最稳妥） - 检查链接的
href是否为#top，不能是.top或/#top - 若用 JavaScript 触发，别忘了加
event.preventDefault()，否则会触发默认跳转并打断平滑行为
scrollTo 和 scrollIntoView 该怎么选？
scrollTo 更可控，适合返回顶部这种固定位置；scrollIntoView 更适合滚动到某个动态元素，但对 behavior: 'smooth' 的支持更晚（Chrome 61+，Firefox 68+），且默认滚动到元素顶部，可能被 header 遮挡。
- 返回顶部优先用
window.scrollTo({ top: 0, behavior: 'smooth' }) - 如果要滚动到某块内容且需兼容老浏览器，先检测
'scrollBehavior' in document.documentElement.style，不支持时降级为scrollTop = 0 - 避免对
document.body或document.documentElement直接设scrollTop，不同浏览器认的主体不同，scrollTo是统一入口
怎么让按钮只在滚动一段距离后出现？
靠监听 scroll 事件 + 判断 window.scrollY，但别在回调里直接操作 DOM 显示/隐藏——容易引发重排和卡顿。
- 用
requestAnimationFrame节流，例如：let ticking = false;<br>function updateButton() {<br> if (!ticking) {<br> requestAnimationFrame(() => {<br> const show = window.scrollY > 300;<br> backToTopBtn.style.display = show ? 'block' : 'none';<br> ticking = false;<br> });<br> ticking = true;<br> }<br>} - 把按钮固定在视口右下角，CSS 用
position: fixed; bottom: 24px; right: 24px;，避免随文档流重排 - 别用
opacity+transition控制显隐，iOS Safari 对 fixed 元素的 opacity 动画有渲染 bug，改用visibility或display
真正麻烦的不是滚动本身，而是各种浏览器对 scroll-behavior 的实现差异，以及 fixed 定位按钮在 iOS 上的点击穿透、input 失焦等问题——这些得靠真机测试，光看桌面 Chrome 是不够的。
