Javascript 单击单页滚动导航中的菜单项时在控制台中激发的TypeError

Javascript 单击单页滚动导航中的菜单项时在控制台中激发的TypeError,javascript,jquery,onepage-scroll,Javascript,Jquery,Onepage Scroll,我正在进行一页滚动导航。它应该在滚动或单击时将类“active”从一个菜单转到另一个菜单,但每次单击任何菜单项时,我都会在控制台中遇到此错误: TypeError:$(…)。未定义偏移量() 下面是我的代码片段;我在原始代码中使用jQuery 3.4.1 函数calculateScroll(){ var contentTop=[]; var contentBottom=[]; var winTop=$(window.scrollTop(); var rangeTop=200; var Rang

我正在进行一页滚动导航。它应该在滚动或单击时将类“active”从一个菜单转到另一个菜单,但每次单击任何菜单项时,我都会在控制台中遇到此错误:

TypeError:$(…)。未定义偏移量()

下面是我的代码片段;我在原始代码中使用jQuery 3.4.1

函数calculateScroll(){
var contentTop=[];
var contentBottom=[];
var winTop=$(window.scrollTop();
var rangeTop=200;
var RangeBooth=500;
$('.site主菜单')。查找('a')。每个(函数(){
push($($(this.attr('href')).offset().top);
contentBottom.push($($(this.attr('href')).offset().top+$($(this.attr('href')).height());
})
$.each(contentTop,函数(i){
if(winTop>contentTop[i]-rangeTop&&winTop
.menu包装{位置:固定;顶部:0}
.site主菜单{列表样式:无;填充:0}
.site主菜单li{显示:内联块;}
.site主菜单li a{填充:5px10px;颜色:#fff;背景:#000;文本装饰:无}
.site主菜单li a.active{背景色:红色}
部分{填充:50px 10px;边框:1px实心#ccc;页边距底部:20px;页边距顶部:40px}

第一节 第二节 第三节
发生类型错误是因为
此处未定义this.hash,因此
$(this.hash).offset()
也未定义

$('.site-main-menu li').click(function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 80}, 800);
    return false;
});

发生TypeError是因为此处未定义
this.hash
,因此
$(this.hash).offset()
也未定义

$('.site-main-menu li').click(function() {  
    $('html, body').animate({scrollTop: $(this.hash).offset().top - 80}, 800);
    return false;
});

我能够使用下面的JQuery片段处理错误

$(文档).ready(函数(){
$('.site主菜单li a')。单击(函数(e){
e、 预防默认值();
$('html,body')。设置动画({
scrollTop:$($(this.attr('href')).offset().top,
},
1000,
“线性”
)
});
});
.menu包装{位置:固定;顶部:0}
.site主菜单{列表样式:无;填充:0}
.site主菜单li{显示:内联块;}
.site主菜单li a{填充:5px10px;颜色:#fff;背景:#000;文本装饰:无}
.site主菜单li.active{背景色:红色}
部分{填充:50px 10px;边框:1px实心#ccc;页边距底部:20px;页边距顶部:40px}

第一节 第二节 第三节
我使用下面的JQuery片段处理了这个错误

$(文档).ready(函数(){
$('.site主菜单li a')。单击(函数(e){
e、 预防默认值();
$('html,body')。设置动画({
scrollTop:$($(this.attr('href')).offset().top,
},
1000,
“线性”
)
});
});
.menu包装{位置:固定;顶部:0}
.site主菜单{列表样式:无;填充:0}
.site主菜单li{显示:内联块;}
.site主菜单li a{填充:5px10px;颜色:#fff;背景:#000;文本装饰:无}
.site主菜单li.active{背景色:红色}
部分{填充:50px 10px;边框:1px实心#ccc;页边距底部:20px;页边距顶部:40px}

第一节 第二节 第三节
但是我的代码和你在这里发布的代码没有区别。我该如何解决这个问题?但是我的代码和你在这里发布的代码没有区别。我该如何解决这个问题?@mplungjan我尝试了不同的方法,但似乎都不起作用。你觉得怎么样?@mplungjan我尝试过不同的方法,但似乎都不起作用。你怎么认为?