jQuery滚动时出现Cannot read property 'top' of undefined错误求助

刚接触jQuery就遇到滚动导航的问题很正常，我帮你一步步排查修复~

首先这个报错的核心原因很明确：你尝试获取一个不存在的DOM元素的offset().top值。从你的代码片段来看，问题出在refElement对应的页面元素找不到，导致调用offset()时返回undefined，再去访问top属性就触发了报错。

1. 先补全并修复你的代码逻辑 #

推测你没写完的部分是想判断滚动位置和锚点元素的对应关系，我帮你补全并加上关键的错误处理：

var scrollPos = $(document).scrollTop();
$('#navbar li').each(function () {
    var currLink = $(this);
    var manurl = currLink.find('a').attr("href");
    
    if(manurl !== "#"){
        console.log(manurl);
        var type = manurl.split('#');
        var refElement = '';
        if(type.length > 1) refElement = type[1];
        console.log(refElement + "sssss");
        
        // 关键步骤1：获取锚点对应的元素
        var targetElement = $('#' + refElement);
        // 关键步骤2：先判断元素是否存在，再去访问offset().top
        if(targetElement.length > 0){
            var elementTop = targetElement.offset().top;
            // 这里写你原本的滚动判断逻辑，比如导航高亮
            if(elementTop <= scrollPos && elementTop + targetElement.height() > scrollPos){
                $('#navbar li').removeClass('active');
                currLink.addClass('active');
            }
        } else {
            // 调试提示：找不到元素时打印警告，方便你排查
            console.warn(`页面中不存在ID为${refElement}的元素，请检查锚点链接和元素ID是否匹配`);
        }
    }
});

2. 几个必须注意的细节 #

• 锚点与元素ID必须完全匹配：比如你的链接href是#about，页面里必须有<div id="about">这样的元素，大小写、拼写都不能错。
• 处理跨页面锚点的情况：如果你的链接是https://xxx.com/page#contact这种跨页面锚点，当前页面没有#contact元素，就会触发警告，这时候可以直接跳过该导航项的处理。
• 滚动事件加防抖优化：滚动时函数会频繁触发，加个防抖能提升页面性能：

// 防抖函数
var debounce = function(func, delay) {
    var timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(func, delay);
    }
};

// 绑定防抖后的滚动事件
$(window).scroll(debounce(function() {
    // 把你的滚动处理逻辑放在这里
}, 100));

内容的提问来源于stack exchange，提问作者shrddha patel