JavaScript 回到顶部按钮完整指南（完整版）

回到顶部按钮为什么值得花时间学？

回到顶部按钮是JavaScript生态里一个高频出现的知识点。网上关于它的资料不少，但要么太零散，要么太晦涩。本文尝试用尽量直白的方式把它讲清楚。

回到顶部按钮的重点都在这了

• 写回到顶部按钮相关代码时，变量命名要能自解释，别用 a、b、c 这类名字。
• 回到顶部按钮的默认值要搞清楚，很多 bug 都是「我以为默认是……」造成的。
• 回到顶部按钮的使用要适度，过度设计比不用更糟糕。
• 学习回到顶部按钮时建议画出它的执行流程图，一图胜千言。

以上是基础部分，下面看点实际的。

回到顶部按钮代码实战

回到顶部按钮：

const btn = document.querySelector('#back-top');

// 滚动超过一屏才显示
window.addEventListener('scroll', () => {
  btn.style.display = window.scrollY > 400 ? 'block' : 'none';
});

// 平滑滚动回顶部
btn.addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

新手常犯的错误

1. 学会用二分法排查：注释掉一半代码，问题范围立刻减半。
2. 数据库操作后记得确认影响行数，0 行和预期不符时要警惕。
3. 开发环境正常、线上却报错的情况，多半是环境差异导致的，优先核对版本号和配置项。

收尾

把回到顶部按钮用好，代码质量会上一个台阶；把每个小知识点都用好，职业生涯会上一个台阶。共勉。

---

遇见问题加 QQ23979811 协助处理