优先用 addEventListener('scroll')，因其支持多次绑定和移除；滚动事件需节流，推荐 requestAnimationFrame 或 setTimeout 防抖；阈值建议设为200px或匹配首屏高度；返回顶部用 window.scrollTo({top: 0, behavior: 'smooth'})；按钮用 fixed 定位并合理设置 z-index、opacity、transform 和 transition 实现流畅显隐。
滚动监听用 window.onscroll 还是 addEventListener('scroll')
优先用 addEventListener('scroll')。直接赋值 window.onscroll 会被后续赋值覆盖，无法叠加多个监听；而 addEventListener 支持多次绑定，也便于后期移除（比如组件卸载时清理）。
注意：滚动事件触发非常频繁，不加节流容易卡顿。实际中至少用 requestAnimationFrame 包一层，或者简单用 setTimeout 防抖（延迟 100ms 内只执行最后一次）。
- 别在
onscroll里直接写复杂逻辑或 DOM 操作 - 判断是否显示返回顶部按钮，只需读取
window.scrollY或document.documentElement.scrollTop - 兼容性上，
window.scrollY在现代浏览器都支持；IE 只认document.documentElement.scrollTop，但 IE 已淘汰，可不兼容
按钮显示/隐藏的临界值设多少合适
通常用 200 像素作为阈值：用户向下滚动超过 200px 后才显示按钮。太小（如 50px）会让按钮过早出现，干扰首屏体验；太大（如 800px）又可能让用户错过返回入口。
这个值不是固定死的，取决于页面首屏高度。如果首页 banner 很高（比如 600px），建议设为 600，确保按钮在用户真正“需要返回”时才出现。
立即学习“前端免费学习笔记（深入）”；
- 检测逻辑示例：
if (window.scrollY > 200) { button.classList.remove('hidden'); } else { button.classList.add('hidden'); } - 避免每帧都操作 class——先查当前状态，再决定是否切换，减少重排
- 用
classList.toggle('show', condition)更简洁，但需确保 CSS 中.show是显式定义的显示规则
点击返回顶部用 window.scrollTo 还是 element.scrollIntoView
用 window.scrollTo。目标是回到页面最顶端，不是某个元素，scrollIntoView 适合锚点跳转，且默认行为可能因容器 overflow 而失效。
window.scrollTo({ top: 0, behavior: 'smooth' }) 是目前最稳妥的选择。注意 behavior: 'smooth' 在 Safari 旧版本和部分安卓 WebView 中不支持，但降级为非动画滚动不影响功能。
- 不要用
document.body.scrollTop = 0或document.documentElement.scrollTop = 0：手动赋值不触发平滑滚动，且在某些文档模式下无效 - 点击后建议立即禁用按钮（
button.disabled = true），防止连点；滚动结束再恢复，可用scrollend事件（Chrome 114+、Firefox 113+ 支持），但兼容性不足时可用setTimeout延迟 300ms 恢复 - 若页面有固定 header，想让滚动终点留出 header 高度，把
top改成负值（如top: -80），再靠 CSSscroll-margin-top微调
CSS 动画和定位容易被忽略的细节
按钮通常用 position: fixed 定位在右下角，但很多人忘了设置 z-index —— 如果页面有弹窗、导航栏等层级高的元素，按钮可能被盖住。
显示/隐藏动画不能只靠 opacity 和 visibility，否则按钮仍占布局空间或无法点击。推荐组合使用：
-
opacity: 0+pointer-events: none+transform: translateY(20px) - 过渡用
transition: opacity 0.2s, transform 0.2s，避免all - 不要给按钮加
display: none切换：会导致每次显示都要重排，且无法做入场动画 - 移动端需额外加
bottom: 20px和right: 20px，并用@media (max-width: 768px)微调尺寸和间距
滚动监听本身很简单，难的是让按钮不抢眼、不误触、不卡顿、不遮挡——这些细节堆起来，才是用户觉得“这个返回顶部很顺”的原因。
