点击仅含#的锚点链接触发语法错误的JS问题求助

云原生阿岚

2026-6-13

问题解决：点击href="#"的链接时出现SyntaxError

问题原因

当链接的href值为单独的#时，document.querySelector('#')是无效的CSS选择器——CSS的ID选择器要求#后面必须跟一个合法的标识符（不能是空字符串），所以执行这行代码会抛出语法错误。

解决方案

在点击事件处理逻辑中，单独判断href是否为#：

如果是#，直接执行回到顶部的滚动操作（这也是这类链接的常规行为）
如果是#xxx格式的锚点，再尝试查找目标元素并滚动

同时可以优化链接筛选逻辑，直接用CSS属性选择器a[href^="#"]来获取所有以#开头的链接，无需额外的数组转换和过滤步骤。

修改后的代码

// 直接筛选所有href以#开头的链接
document.querySelectorAll('a[href^="#"]').forEach(el => {
    el.addEventListener('click', e => {
        e.preventDefault();
        const href = el.getAttribute('href');
        
        // 处理单独的#链接：回到顶部
        if (href === '#') {
            if ('scrollBehavior' in document.documentElement.style) {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            } else {
                window.scrollTo(0, 0);
            }
            return;
        }
        
        // 处理带ID的锚点链接
        const toTarget = document.querySelector(href);
        if (toTarget) {
            if (toTarget.scrollIntoView) {
                toTarget.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
            } else {
                const rect = toTarget.getBoundingClientRect();
                window.scrollTo(rect.x, rect.y);
            }
        }
    });
});