Javascript jQuery手风琴菜单：滚动到活动菜单项

我制作了一个手风琴菜单，作为一个高效的手机菜单。为此，我使用了jquery2.1.1库

与我希望的不一样的部分是关于body标记动画的部分

我希望文档滚动到活动菜单项，而不是像现在那样滚动到导航标签

这就是我想到的：

$（“#菜单”）.children（'ul'）。on（'click'，'）。菜单项，函数（e）{
如果（$（窗口）.width（）<640）{
e、 预防默认值（）；
var$menu_item=$（this）.closest（'li'）；
var$sub_menu=$menu_item.find（'.sub menu'）；
var$other_sub_menu=$menu_item.sides（）.find（'.sub menu'）；
如果（$sub_menu.is（'：visible'））{
$sub_菜单.幻灯片（200）；
$menu_item.removeClass（'selected'）；
}否则{
$other_sub_menu.slideUp（200）；
$sub_菜单。向下滑动（200）；
$menu_item.sides（）.removeClass（'selected'）；
$menu_item.addClass（'selected'）；
}
}
$（'html，body'）。设置动画({
scrollTop:$（this）.offset（）.top
}, 500);
log（$（this.offset（）.top）；
});
正文{
字体系列：Arial，无衬线；
}
p{
字体大小：14px；
线高：1.6；
}
导航ul{
列表样式类型：无；
保证金：0；
填充：0；
}
#菜单{
最大宽度：640px；
}
#菜单ul{
背景:#069 ;；
}
#菜单ul.子菜单{
显示：无；
背景：#fefefe；
}
#菜单ulli a{
文字装饰：无；
显示：块；
字体大小：13px；
颜色：#fff；
填充：0 10px；
高度：32px；
线高：30px；
位置：相对位置；
边框顶部：1px实心rgba（0,0,0,0.1）；
边框底部：1px实心rgba（255、255、255、0.1）；
}
#菜单ul.子菜单LIA{
左侧填充：25px；
颜色：#555；
}
#菜单>ul>li>a:之后{
显示：内联块；
垂直对齐：中间对齐；
内容：“\2304”；
位置：绝对位置；
右：0；
字体大小：20px；
线高：20px；
垫底：10px；
宽度：30px；
文本对齐：居中；
排名：0；
颜色：#fff；
}
#菜单li.选择a:之后{
-webkit变换：旋转（180度）；
-moz变换：旋转（180度）；
-ms变换：旋转（180度）；
-o变换：旋转（180度）；
}

页面标题
































佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯
Placelat eleifend leo

佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯
Placelat eleifend leo。他是一个聪明的人。威斯康辛州的前庭、调味品、康茂德维塔、奥纳雷西特、威斯康辛州。埃涅亚发酵液、elit eget tincidunt调味品、欧洛斯益智果、桑慈姑
埃尼姆·ac·杜伊。在turpis枕面部进行非enim治疗。乌特·费利斯。事实上，这是一个错误，是一个错误，是一个错误，是一个错误。阿利奎姆·埃拉特·帕特。Nam dui mi、tincidunt quis、accumsan porttitor、facilisis
卢克图斯，梅特斯

佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。前庭侵权人、世仇、别有用心者、临时诉讼人、担保人。不要让你的自由人坐在那里。我的生命是永恒的。莫里斯
placerat eleifend leo.
只需在jQuery代码片段中更改此部分：

$('body').animate({
  scrollTop: $("#menu").offset().top
}, 300);

为此：

$('body').animate({
  scrollTop: $(this).offset().top
}, 300);

这样，当您调用
animate（）
滚动时，您将使用单击的菜单项的偏移量，而不是
#菜单
选择器（在您的情况下，它总是导致nav元素）。
只需在jQuery代码段中更改此部分：

$('body').animate({
  scrollTop: $("#menu").offset().top
}, 300);

为此：

$('body').animate({
  scrollTop: $(this).offset().top
}, 300);

这样，当您调用
animate（）
滚动时，您将使用单击的菜单项的偏移量，而不是
#菜单
选择器（在您的情况下，它总是导致nav元素）。
它几乎可以工作，但有多个菜单项。很抱歉，我误读了
$menu item
变量。更新了上面的示例（改为使用
$（this）
，因为
this
保存了单击的链接），它确实可以工作，但并不像预期的那样：如果您单击第二个项目（“监视器和屏幕”），您将看到文档在其上方滚动。请稍等，先生。让我自己摆弄一把小提琴。实际上，一个接一个地点击更多的项目。例如，单击第二个，然后单击第三个。它几乎可以工作，但有多个菜单项。对不起，我误读了您的
$menu\u项
变量。更新了上面的示例（改为使用
$（this）
，因为
this
保存了单击的链接），它确实可以工作，但并不像预期的那样：如果您单击第二个项目（“监视器和屏幕”），您将看到文档在其上方滚动。请稍等，先生。让我自己摆弄一把小提琴。实际上，一个接一个地点击更多的项目。例如，单击第二个，然后单击第三个。