JS实现平滑滚动时报Uncaught TypeError: Cannot read property 'addEventListener' of null是什么原因

你遇到的报错：

Uncaught TypeError: Cannot read property 'addEventListener' of null

核心成因 #

报错的直接原因是代码中section1变量的值为null，无法调用addEventListener方法，导致变量为null的原因是JS执行时机早于DOM渲染完成：
你的JS代码写在<body>标签的内容之前，浏览器解析页面是从上到下逐行执行，当运行到var section1 = document.querySelector('.section1')这行代码时，<body>里class为section1的a标签还没被渲染出来，所以DOM查询返回的结果是null。

其他隐藏问题 #

修复加载时机问题后，你还会遇到其他报错，都是拼写错误导致的：

• getBoundingClientReact()拼写错误，正确方法名为getBoundingClientRect()
• window.pageyOffset拼写错误，正确属性名为window.pageYOffset（Y为大写）

修复方案 #

1. 调整JS代码放置位置：将所有JS代码移到</body>闭合标签的前面，保证DOM渲染完成后再执行DOM查询逻辑
2. 也可以将所有JS逻辑包裹在DOMContentLoaded事件回调中，不需要调整代码位置也能保证DOM加载完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 此处放置你原来的所有JS代码
})

3. 修正上述两处拼写错误

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