Javascript 锚定标记属性

下面是我网站的代码。我正在努力使导航栏响应。但是在小屏幕上，导航栏按钮的行为很奇怪，只要我点击它，它就会重定向到顶部，而不是显示列表项。相反，我希望它做的是展开并显示导航栏的所有其他列表项。但我不能这样做。有人能帮我吗

函数响应导航栏（）{
让navItems=document.queryselectoral（“.navbar li”）；
if（navItems[1].classList==“响应导航栏”）{
navItems.forEach（函数（navItem）{
navItem.classList.remove（“响应导航栏”）；
});
}否则{
navItems.forEach（函数（navItem）{
navItem.classList.add（“响应导航栏”）；
});
}
}

*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
字体大小：62.5%；
滚动行为：平滑；
}
身体{
框大小：继承；
颜色：#777；
背景色：#E0E2DB；
字体系列：“Roboto”，无衬线；
字体大小：1.8rem；
字体大小：400；
线高：1.5；
滚动行为：继承；
}
.clearfix{zoom:1；}
.clearfix:之后{
内容：‘’；
明确：两者皆有；
显示：块；
身高：0；
可见性：隐藏；
}
/* ------------------------------------- */
/*可重用内容*/
/* ------------------------------------- */
/*网格*/
.行{
宽度：80%；
保证金：0自动；
}
.第1页，共2页{
宽度：48%；
浮动：左；
}
/*HTML内容*/
h1，h2.标题，h2，h3，h5{
保证金：0；
文本转换：大写；
}
h1{
字体大小：4.5rem；
颜色：#E0E2DB；
字母间距：.4rem；
字距：.5rem；
字体大小：300；
}
氢{
字体大小：3.5rem；
颜色：#3D348B；
字母间距：.3rem；
}
h3{
字体大小：2.6rem；
颜色：#000；
}
h4{
字号：2.2rem；
颜色：#E0E2DB；
}
h5{
字号：2rem；
边缘底部：.5rem；
颜色：#191716；
}
/*链接*/
a{
文字装饰：无；
显示：内联块；
}
/*图标*/
.图标小{
字号：2rem；
颜色：#3D348B；
右边距：1rem；
}
/*钮扣*/
.btn{
边框：1px实心#E6AF2E；
边界半径：.3rem；
字体大小：1.6rem；
填充：1.2雷姆3.5雷姆；
文本转换：大写；
颜色：#E0E2DB；
背景色：透明；
字体大小：粗体；
字母间距：.3rem；
过渡：全部3秒；
}
.btn:悬停{
背景色：#E6AF2E；
颜色：#191716；
}
.btn2{
背景色：#3D348B；
颜色：#E0E2DB；
边框：1px实心#3D348B；
边界半径：.3rem；
字体大小：1.6rem；
填充：1.2雷姆3.5雷姆；
文本转换：大写；
字体大小：粗体；
字母间距：.3rem；
过渡：全部3秒；
}
.btn2：悬停{
背景色：#E0E2DB；
颜色：#191716；
}
/*实用程序类*/
.u-裕度-上-小{
保证金上限：2.5雷姆；
}
.u-保证金-中上{
边缘顶部：5雷姆；
}
.u-margin-top-big{
最高保证金：7.5雷姆；
}
.u-边际-底部-小{
边缘底部：2rem；
}
.u-边际-底部-中等{
边缘底部：4rem；
}
.u-text-align-center{
文本对齐：居中；
}
.u型内联块{
显示：内联块；
}
/* ------------------------------------- */
/*标题部分*/
/* ------------------------------------- */
标题{
背景色：#3D348B；
高度：100vh；
}
.英雄文本框{
位置：绝对位置；
最高：45%；
左：50%；
转换：翻译（-50%，-50%）；
}
h2.2标题标题{
字体大小：3.5rem；
边缘顶端：2rem；
颜色：#E6AF2E；
字体大小：400；
}
h2.口号{
颜色：#E6AF2E；
字体大小：2.8rem；
字体大小：400；
}
/* ------------------------------------- */
/*导航栏*/
/* ------------------------------------- */
.导航{
位置：相对位置；
边框底部：5px实心#777；
过渡：全部5秒；
}
.标志盒{
浮动：左；
}
.logo img{
宽度：6雷姆；
高度：自动；
左边距：2em；
边界半径：50%；
}
导航{
填充：.5rem；
}
navbar先生{
浮动：对；
列表样式：无；
保证金权利：10雷姆；
保证金上限：1.5雷姆；
}
李国宝先生{
显示：内联块；
}
李娜先生{
保证金：0.1rem；
填充：.2rem.6rem；
颜色：黑色；
文本转换：大写；
边框底部：2倍纯色透明；
过渡：全部3秒；
}
李娜：悬停{
边框底部：2px实心#E6AF2E；
过渡：全部3秒；
}
.navbar.nav图标{
显示：无；
过渡：全部3秒；
}
/*粘性导航条*/
.粘的{
位置：固定；
背景色：#3D348B；
排名：0；
宽度：100%；
盒影：0.2rem.3rem rgba（0,0,0,5）；
}
.sticky.navbar列表{
颜色：#E0E2DB；
}
.sticky.logo{
颜色：#E0E2DB；
}
/*响应导航条*/
.响应导航条{
显示：块；
文本对齐：右对齐；
}
/* ------------------------------------- */
部分{
填充：8rem；
}
/* ------------------------------------- */
/* ------------------------------------- */
/*关于部分*/
/* ------------------------------------- */
.关于部分{
填充：0；
边缘顶部：12雷姆；
}
.长文本{
宽度：70%；
保证金：2.5雷姆自动0；
}
.个人资料图像{
身高：35雷姆；
宽度：自动；
}
.我的信息{
文本对齐：右对齐；
右：15雷姆；
}
.我的信息列表{
列表样式：无；
}
.我的信息列表>李{
边缘底部：1.2rem；
}
/* ------------------------------------- */
/*媒体查询组*/
/* ------------------------------------- */
@仅介质屏幕和（最大宽度：720px）{
html{
字体大小：50%；
}
.删除标题{
显示：无；
}
.logo img{
宽度：5雷姆；
页边顶部：1rem；
}
/*响应导航条*/
李国宝先生{
显示：无；
}