Javascript 单页网站上的侧栏菜单不工作

我有一个有很多内容的单页网站，左边有一个粘性的侧栏导航。每当选择一个菜单项时，我都试图让页面向下滚动到contents div中的相应部分。这可能是非常基本的东西，但我就是不能完全理解它（一直在尝试各种解决方案，但没有成功–请参阅下面的代码）

我对javascript和jquery比较陌生，非常感谢您的想法/建议

到目前为止，我成功做到了：

• 侧边栏菜单是粘性的
• 选择菜单项时，侧栏导航中链接的活动状态会发生变化
• 我还设法让contents div中的元素在选择相应的nav菜单项时改变活动状态

现在所缺少的就是菜单链接能够正常工作，并将页面向下推到右侧的部分ID

再次，如果这是一个非常愚蠢的问题，我很抱歉，我很感谢你的建议

$（函数（）{
$（'.feature_tab'）。单击（函数（evt）{
var selectedTab=$（此值）；
var featureGroup=selectedTab.parents（'.features\u public\u content\u container'）；
var allTabs=featureGroup.find（'.feature_tab'）；
var allContent=featureGroup.find（'.feature_框'）；
//获取rel属性以了解需要激活的框
var rel=$（this.attr（'rel'）；
//清除选项卡选择
allTabs.removeClass（'selected'）；
selectedTab.addClass（'selected'）；
//使所有框“处于活动状态”
$（'.feature_box'）。每个（函数（）{
$（this.removeClass（'active'）；
});
//展示我们需要什么
$（'.feature_box.feature_category_'+rel）.addClass（'active'）；
//查找相关内容
var idx=selectedTab.index（）；
var selectedContent=$（allContent）；
selectedContent.removeClass（'in-active'）；
$（'a'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（$（this.attr（'href'））.offset（）.top
}, 1000);
返回false；
});
});
});
。隐藏{
显示：块；
颜色：蓝色；
}
.特色(附页){
边缘顶部：65px；
位置：相对位置；
}
.features\u public\u content\u容器{
宽度：100%；
身高：100%！重要；
位置：相对位置；
最大宽度：1200px；
左边距：自动；
右边距：自动；
字体大小：12px；
填充：0 40px
}
#左侧边栏{
身高：100%！重要；
宽度：20%；
边框：4倍纯绿！重要；
位置：绝对位置；
浮动：左
}
#对{
边框：4px纯红！重要；
高度：自动；
最大宽度：80%；
排名：0；
右：0；
浮动：对；
位置：相对位置；
}
.功能\u页面.侧栏\u导航\u容器{
利润率：45px自动；
背景：黄色；
位置：相对位置；
浮动：左
}
.features\u页面.侧栏\u导航\u容器.feature\u选项卡{
浮动：无；
宽度：100%；
颜色：#1193f6！重要；
文本对齐：左对齐；
线高：40px；
高度：40px；
左侧填充：24px；
字体大小：12px；
左边框：1px实心#efefef！重要；
文本转换：大写；
字号：500；
溢出：隐藏；
光标：指针；
职位：相对
}
.features\u页面.侧栏\u导航\u容器.features\u选项卡.指示器{
位置：绝对位置；
宽度：100%；
身高：100%；
显示：无；
底部：0；
左：0
}
.features\u页面。侧栏\u导航\u容器。feature\u选项卡：悬停。指示器{
显示：块；
左边框：4px实心#d6ecfd
}
.features\u页面。侧栏\u导航\u容器。feature\u选项卡。选中。指示器{
显示：块；
左边框：4px实心#1193f6；
}
.features\u页面。feature\u框\u容器{
填充底部：80px；
填充顶部：45px；
文本对齐：居中；
背景#f2f2；
}
.features\u页面。feature\u框\u容器。feature\u框{
背景：#fff；
显示：内联块；
高度：210px；
宽度：235px；
利润率：12像素；
填充：24px；
文本对齐：居中；
垂直对齐：顶部；
-webkit边界半径：2px；
-moz边界半径：2px；
-ms边界半径：2px；
-o-边界半径：2px；
边界半径：2px；
-webkit盒阴影：0 1px 3px rgba（0,0,0,0.12）；
-moz盒阴影：0 1px 3px rgba（0,0,0,0.12）；
-ms盒阴影：0 1px 3px rgba（0,0,0,0.12）；
-o形盒阴影：0 1px 3px rgba（0,0,0,0.12）；
长方体阴影：0 1px 3px rgba（0,0,0,0.12）
}
.features\u页面。feature\u框\u容器。feature\u框。活动{
边框：2px实心#1193f6；
}
.features\u页面。feature\u框\u容器。feature\u框。feature\u概述\u图标{
填充：18px
}
.features\u页面。feature\u框\u容器。feature\u框。活动。feature\u概览\u图标{
颜色：#1193f6；
}
.features\u页面。feature\u框\u容器。feature\u框。处于活动状态。feature\u概览\u图标{
颜色：#363636；
}

特征A-1
特征A-2
特征A-3
特征B-1
特征B-2
特征B-3
特征C-1
特征C-2
特征C-3
您可能想要这个：

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});


另请参见以下问题：



你也可以使用插件来实现这一点。喜欢
谢谢你的发帖，也谢谢你的链接和提琴。我已经试过了你的建议（以及我在其他帖子中找到的东西），但我仍然没有成功。看起来我在做一些根本错误的事情，但不知道是什么。有进一步的提示吗？（我用你发布的js更新了我的小提琴，为了清晰起见，我还尝试清理了我的代码片段。）谢谢！不客气，你的问题是你给了一个重复的id给div，你已经有了3个id为“a”的div，等等。你可以把每3个div放在一个id为1的div中。什么