Jquery 如何将此手风琴自动滚动到选定标题的顶部，并将其放置在div中？

我有一个手风琴，里面有很多东西。我希望模仿“温特布拉德”提供的答案中的相同效果。我已经达到了这个效果。但是，当我指定高度并在其上附加垂直滚动条以调整其大小并将其放置在网页上时，自动滚动到所选面板顶部的操作将不起作用。它要么不起作用并继续占据整个浏览器窗口，要么不滚动到所选面板的顶部，而是在列表项的中间停止

$（窗口）.load（函数（）{
$（“.category>.equipment”）。单击（函数（）{
if（！$（this.parent（）.hasClass（“活动”））{
$（“.active.details”）.slideUp（“slow”）；
$（“.category”）.removeClass（“活动”）；
$（this.parent（）.addClass（“活动”）；
$（this）.parent（）.children（.details”）.slideDown（“slow”，function（））{
$（'html，body'）。设置动画({
scrollTop:$（this）.parent（）.offset（）.top
}, 2000);
});
}否则{
$（this.parent（）.removeClass（“活动”）；
$（this.parent（）.children（“.details”）.slideUp（“slow”）；
}
});
});

*{margin:0；padding:0；}
#手风琴{位置：相对；
顶部：200px；
左：20px；
高度：400px；
宽度：250px；
溢出y：自动；
字体系列：arial、helvetica、无衬线字体；
背景#006F70；
利润率：0px 16px 0 16px；
颜色：白色；
/*一些很酷的阴影和辉光效果*/
框阴影：
0 5px 15px 1px rgba（0,0,0,0.6），
200px 1px rgba（255,255,255,0.5）；
浮动：左；
边框：2倍纯白；
}
/*标题样式*/
#手风琴h3{
字体大小：12px；
字母间距：0.7px；
字距：1px；
边际上限：0px；
线高：17px；
空白：行前；
填充：10px 10px；
文本对齐：居中；
光标：指针；
/*不支持渐变的浏览器的回退*/
背景#003040；
背景：线性梯度（#003040，灰色）；
}
/*航向悬停效应*/
#手风琴h3：悬停{背景：#008080；}
/**文本阴影：0 1px rgba（0，128，0.5.）**/
}
/*清单项目*/
#李手风琴{
列表样式类型：无；
}
/*链接*/
#手风琴手{
颜色：白色；
文字装饰：无；
文本转换：大写；
空白：行前；
文本对齐：居中；
字体大小：11px；
线高：27px；
显示：块；
填充：0 15px；
/*平滑悬停动画的过渡*/
过渡：均为0.15秒；
}
/*链接上的悬停效果*/
#手风琴：悬停{
背景#003545；
左边框：5px实心浅绿色；
}
/*默认情况下，允许隐藏非活动LIs*/
#手风琴{
显示：无；
}

小组1






















小组2

























小组3












小组4
















小组5










小组6




























小组7

单击面板时，您是否只是想将其置于顶部？我试图将整个代码格式用作固定大小的手风琴菜单，显示在网页的左侧栏上。是的，当用户单击面板时，面板应移动到手风琴的顶部，然后是列出的项目。如果手风琴中没有显示该面板的空间，则该面板顶部或下方的其他折叠面板应滚出视图。非常感谢。