JavaScript 回到顶部按钮常见问题汇总（完整版）

写JavaScript代码时间久了会发现，真正拉开差距的往往不是高大上的框架，而是像回到顶部按钮这样的基础功夫。基础牢不牢，线上见分晓。

问题一：初学回到顶部按钮，第一步做什么？

回到顶部按钮的文档注释写清楚参数含义和返回值，降低别人（和未来的自己）的理解成本。

了解回到顶部按钮的返回值约定，尤其是失败时返回什么，别让异常悄悄溜过。

问题二：回到顶部按钮的代码长什么样？

实践一下，回到顶部按钮：

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. 不要忽视 warning，它往往是 error 的前奏。
2. 缓存是个双刃剑，改了代码不生效时，先想想是不是有缓存没清。
3. 新功能上线最好有开关，出问题能秒级回滚。
4. 复杂问题拆成小问题逐个验证，比一次性调一大段效率高得多。

关于回到顶部按钮就写到这里。如果文中有讲得不清楚的地方，欢迎指出，我会及时补充完善。

遇见问题加 QQ23979811 协助处理