原生JS返回顶部按钮点击无效，报Uncaught TypeError错误求助

错误核心原因 #

报错Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')的本质是**scrollToTopBtn变量未正确获取到DOM元素**，导致其值为null，无法调用addEventListener方法。常见触发场景：

• JS代码在DOM元素加载完成前就执行，浏览器还没解析到按钮元素
• 未通过选择器定义scrollToTopBtn变量，直接调用导致报错

分步修复方案 #

1. 先正确获取按钮元素 #

你的原JS代码缺少scrollToTopBtn的定义，需要通过类选择器获取按钮，同时补充rootElement的定义（否则scrollToTop函数也会报错）：

const scrollToTopBtn = document.querySelector('.scrollToTopBtn');
const rootElement = document.documentElement;

2. 确保JS在DOM加载后执行 #

有两种可靠方式：

• 将JS代码放在HTML的</body>标签前，让浏览器先解析完所有DOM再执行JS
• 用DOMContentLoaded事件包裹代码，确保DOM加载完成后再执行逻辑：

document.addEventListener('DOMContentLoaded', function() {
  const scrollToTopBtn = document.querySelector('.scrollToTopBtn');
  const rootElement = document.documentElement;

  function scrollToTop() {
    rootElement.scrollTo({
      top: 0,
      behavior: "smooth"
    });
  }

  // 补充原代码中未定义的handleScroll函数（避免新报错）
  function handleScroll() {
    // 示例：滚动到页面30%位置时显示按钮，否则隐藏
    const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
    if ((rootElement.scrollTop / scrollTotal) > 0.3) {
      scrollToTopBtn.classList.add('showBtn');
    } else {
      scrollToTopBtn.classList.remove('showBtn');
    }
  }

  scrollToTopBtn.addEventListener("click", scrollToTop);
  document.addEventListener("scroll", handleScroll);
});

3. 校验类名一致性 #

确保HTML中按钮的类名scrollToTopBtn和JS选择器完全匹配，无拼写错误。

完整可运行代码示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .scrollToTopBtn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      display: none;
      padding: 10px;
      font-size: 20px;
      cursor: pointer;
      border: none;
      border-radius: 50%;
      background: #333;
      color: #fff;
    }
    .showBtn {
      display: block;
    }
  </style>
</head>
<body>
  <!-- 长内容用于测试滚动 -->
  <div style="height: 2000px; padding: 20px;">滚动到底部后点击返回顶部按钮</div>
  <button class="scrollToTopBtn showBtn">☝️</button>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const scrollToTopBtn = document.querySelector('.scrollToTopBtn');
      const rootElement = document.documentElement;

      function scrollToTop() {
        rootElement.scrollTo({
          top: 0,
          behavior: "smooth"
        });
      }

      function handleScroll() {
        const scrollTotal = rootElement.scrollHeight - rootElement.clientHeight;
        if ((rootElement.scrollTop / scrollTotal) > 0.3) {
          scrollToTopBtn.classList.add('showBtn');
        } else {
          scrollToTopBtn.classList.remove('showBtn');
        }
      }

      scrollToTopBtn.addEventListener("click", scrollToTop);
      document.addEventListener("scroll", handleScroll);
    });
  </script>
</body>
</html>

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