优先用 addeventlistener("scroll")，因其支持多次绑定、可移除且不覆盖已有监听；window.onscroll 会直接覆盖导致协作失效；滚动显示逻辑用 window.scrolly 判断，阈值300；平滑返回顶部应使用 scrollto({top: 0, behavior: "smooth"})。
返回顶部按钮需要绑定 window.onscroll 还是 addEventListener("scroll")
优先用 addEventListener("scroll")。它支持多次绑定、可移除、不覆盖已有监听，而 window.onscroll = ... 会直接覆盖之前的赋值，容易在多人协作或引入第三方脚本时失效。
实际写法示例：
const backToTopBtn = document.getElementById("back-to-top");
window.addEventListener("scroll", () => {
backToTopBtn.style.display = window.scrollY > 300 ? "block" : "none";
});
- 用
window.scrollY判断滚动距离，比document.documentElement.scrollTop兼容性更好（现代浏览器全支持） - 阈值设为
300是常见经验值，太小会过早显示，太大则用户已滚远才出现 - 不要用
scroll事件直接做scrollTop = 0—— 那样会卡顿，后面会讲平滑方案
按钮点击后如何实现平滑滚动到顶部
别手写定时器或 requestAnimationFrame 做缓动，现代浏览器原生支持 scrollTo() 的 behavior: "smooth" 选项，简洁且兼容主流浏览器（Chrome 61+、Firefox 68+、Safari 15.4+）。
点击事件写法：
backToTopBtn.addEventListener("click", () => {
window.scrollTo({ top: 0, behavior: "smooth" });
});
- 必须传对象参数，
window.scrollTo(0, 0)是非平滑的“瞬移” - 如果项目需兼容老 Safari（Element.prototype.scrollTo 是否支持
behavior，否则 fallback 到scrollTop = 0 - 避免在
click中同时调用preventDefault()或stopPropagation()—— 按钮不是链接，无需阻止默认行为
position: fixed 定位时容易被遮挡或错位
固定定位按钮常因 z-index 不足被导航栏、弹窗盖住，或因父容器 transform/perspective 触发新层叠上下文导致定位异常。
- 给按钮设
z-index: 9999（数值够大即可，不必堆砌 999999） - 避免按钮父元素有
transform、filter、opacity 等属性 —— 这些会创建新 stacking context，使子元素的 <code>z-index相对父级生效而非全局 - 推荐直接挂载在
下，CSS 写成：position: fixed; bottom: 24px; right: 24px;，不依赖任何父容器 - 移动端注意加
min-width: 44px; min-height: 44px;，满足触控最小尺寸要求
HTML 结构要不要用 <a href="#"></a>？
不用。用 <button></button> 更语义正确、无障碍友好、无需处理 # 跳转副作用。
-
<a href="#"></a>点击会触发页面跳转到锚点，可能造成 URL 变为example.com/#，影响前端路由或分析埋点 -
<button type="button"></button>是标准做法，加上aria-label="返回顶部"对屏幕阅读器友好 - 若用
<div role="button">，需手动加 <code>tabindex="0"和键盘回车/空格响应 —— 多此一举 实际最简可用结构就是：<button id="back-to-top" type="button" aria-label="返回顶部">↑</button>
配合上面三段 JS + 一段 CSS，就能跑起来。真正容易被忽略的是：滚动监听没做节流，在快速滚动时可能频繁触发样式更新 —— 但现代浏览器对display切换优化得很好，除非极端情况，一般不需要额外加throttle。
