原生JavaScript实现平滑滚动报addEventListener null错误求助

核心报错原因 #

你的错误直接来自JS代码中querySelector的语法错误：

• 你要选择class为section1的元素，正确的类选择器需要加.前缀，你写的document.querySelector('section1')会被识别为选择名为<section1>的自定义标签，页面中不存在该标签，所以返回null，调用addEventListener自然就抛出空指针错误。

其他需要修复的问题 #

• 你绑定点击事件的元素是a标签，默认点击会触发跳转刷新行为，会导致滚动效果失效，需要阻止默认行为。
• 建议添加空值判断，避免目标元素不存在时后续代码继续抛出错误。

修复后的完整JS代码 #

function smoothScroll(target, duration){
    var target = document.querySelector(target);
    // 新增空值判断，避免目标不存在时报错
    if (!target) return
    var targetPosition = target.getBoundingClientRect().top;
    var startPosition = window.pageYOffset;
    var distance = targetPosition - startPosition;
    var startTime = null;

    function animation(currentTime){
        if(startTime === null) startTime = currentTime;
        var timeElapsed = currentTime - startTime;
        var run = ease(timeElapsed,startPosition,distance,duration);
        window.scrollTo(0, run);
        if(timeElapsed < duration) requestAnimationFrame(animation)
    }
    function ease(t, b, c, d) {
        t /= d/2;
        if (t < 1) return c/2*t*t + b;
        t--;
        return -c/2 * (t*(t-2) - 1) + b;
    };

    requestAnimationFrame(animation);
}

// 修复选择器语法，添加类选择器前缀.
var section1 = document.querySelector('.section1');
section1.addEventListener('click',function(e){
    // 阻止a标签默认跳转行为
    e.preventDefault()
    smoothScroll('.section2', 1000)
});

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