求助：用原生JavaScript实现带动画效果的页面返回顶部按钮

没问题！用原生JavaScript实现带平滑动画的返回顶部按钮完全可以，我来帮你补全代码并做些优化~

优化后的完整代码 #

// 缓存按钮元素，避免重复DOM查询，提升性能
const backToTopBtn = document.getElementById("myBtn");

// 页面滚动时控制按钮显示/隐藏
window.addEventListener('scroll', () => {
  // 统一获取滚动距离，兼容不同浏览器的写法
  const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  backToTopBtn.style.display = scrollDistance > 20 ? 'block' : 'none';
});

// 页面加载时初始化按钮状态，避免刷新后按钮显示异常
window.addEventListener('load', () => {
  const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  backToTopBtn.style.display = scrollDistance > 20 ? 'block' : 'none';

  // 点击按钮触发平滑滚动
  backToTopBtn.addEventListener('click', () => {
    // 方案1：现代浏览器极简版（支持Chrome/Firefox/Edge等主流浏览器）
    window.scrollTo({
      top: 0,
      behavior: 'smooth' // 原生自带的平滑动画效果
    });

    // 方案2：兼容旧浏览器的手动动画版（如果需要支持IE等老旧环境）
    // const scrollToTop = () => {
    //   const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    //   if (currentScroll > 0) {
    //     window.requestAnimationFrame(scrollToTop);
    //     // 数值越小滚动越慢，可根据需求调整
    //     window.scrollTo(0, currentScroll - currentScroll / 8);
    //   }
    // };
    // scrollToTop();
  });
});

代码细节说明 #

• 缓存DOM元素：提前把myBtn元素存到变量里，避免每次滚动或点击都重复查询DOM，减少性能消耗。
• 统一滚动距离获取：用window.pageYOffset || document.documentElement.scrollTop兼容不同浏览器的滚动距离计算方式。
• 两种滚动方案：
  • 方案1利用浏览器原生API，代码极简，动画效果流畅，适合绝大多数现代浏览器场景。
  • 方案2用requestAnimationFrame手动实现滚动逻辑，能兼容更老旧的浏览器，你可以根据自己的兼容需求选择。

额外样式提示 #

别忘了给按钮加基础CSS样式，让它固定在页面角落更易用：

#myBtn {
  display: none; /* 默认隐藏 */
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 18px;
}

#myBtn:hover {
  background-color: #333;
}

这样就能实现一个功能完整、带平滑动画的返回顶部按钮啦！

内容的提问来源于stack exchange，提问作者 SlaaSh