jQuery返回顶部按钮转Vanilla JS时出现addEventListener空值报错如何解决

架构老林

2026-10-21

Uncaught TypeError: Cannot read property 'addEventListener' of null

报错原因

选择器使用错误：你调用document.getElementById("backToTopBtn")获取元素，但对应HTML的返回顶部按钮仅设置了class="scroltop"，没有id="backToTopBtn"属性，因此该方法返回null，对null调用addEventListener方法就会抛出上述错误。
执行时机异常：若JS代码在DOM元素渲染完成前执行，即便选择器正确也无法获取到元素对象，同样会返回null触发报错。
逻辑缺失：当前你编写的Vanilla JS仅实现了点击返回顶部的逻辑，缺少原有jQuery代码中滚动距离判断、按钮显隐的功能。

解决方法

1. 修正选择器并补全完整功能

优先监听DOMContentLoaded事件保证DOM加载完成后再执行代码，使用类选择器获取按钮元素，同时补全所有原有功能，代码示例如下：

document.addEventListener('DOMContentLoaded', function() {
  // 通过类名获取按钮元素
  const backToTopBtn = document.querySelector('.scroltop');
  // 增加非空判断，避免极端场景报错
  if (!backToTopBtn) return;

  // 点击返回顶部逻辑
  backToTopBtn.addEventListener('click', function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });

  // 滚动时控制按钮显隐逻辑
  window.addEventListener('scroll', function() {
    const scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollDistance > 900) {
      // 模拟fadeIn效果
      backToTopBtn.style.transition = 'opacity 1s ease';
      backToTopBtn.style.display = 'block';
      backToTopBtn.style.opacity = '1';
    } else {
      // 模拟fadeOut效果
      backToTopBtn.style.transition = 'opacity 1s ease';
      backToTopBtn.style.opacity = '0';
      setTimeout(() => {
        if (backToTopBtn.style.opacity === '0') {
          backToTopBtn.style.display = 'none';
        }
      }, 1000);
    }
  });
});