Javascript 使用箭头键滚动时，将菜单顶部设置在ul元素的中间

我有一个下拉菜单，当您单击输入字段时打开，当单击向上或向下箭头键时，在所选项目上激活蓝色背景。它还将所选项目保持在顶部，以防止所选内容消失

我想做的是在用户单击向下箭头键后，将“顶部”固定到菜单的中间，这样当用户向上或向下滚动时，选择位于中间。p> 我尝试过将scrollTop（）方法一分为二，但似乎无法实现

$（文档）.ready（函数（）{
var$menu=$（“#menu”）；
变量$input=$（“#主输入”）；
$menu.hide（）；
$input.focus（函数（）{
$menu.show（）；
});
$input.blur（函数（）{
$menu.hide（）；
});
$input.on（'keyup'，函数（e）{
如果（e.keyCode==40）{//down
e、 预防默认值（）；
所选变量=$（“.selected”）；
var$list=$（“li.list”）；
var index=$list.index（已选择）；
$list.removeClass（“选定”）；
$list.eq（索引+1）.addClass（“选定”）；
$（“.main ul”）.scrollTop（$（'li'）.index（$（“.selected”）*$（'main li'）.height（））；
}
如果（e.keyCode==38）{//up
e、 预防默认值（）；
所选变量=$（“.selected”）；
var$list=$（“li.list”）；
var index=$list.index（已选择）；
$list.removeClass（“选定”）；
$list.eq（索引-1）.addClass（“选定”）；
$（“.main ul”）.scrollTop（$（'li'）.index（$（“.selected”）*$（'main li'）.height（））；
}
})
});
li{
列表样式：无；
}
保险商实验室{
填充：0px；
边际：0px；
背景色：#eee；
宽度：130px；
高度：120px；
溢出：自动；
溢出x：隐藏；
边界间距：10px；
}
.list{
/*垫面：5px；
垫底：5px*/
左侧填充：10px；
高度：40px；
线高：2.1米；
}
#主要输入{
填充：10px；
}
.选定{
背景色：#d2d2d2；
边界半径：4px；
宽度：220px；
背景色：#0096d6；
边界半径：4px；
宽度：100%；
颜色：#ffffff；
}


一个
两个
三个
四个
五个
六个
七个
八个
九
十个

用javascript编辑这一行（向上和向下）：

这一行：

$(".main ul").scrollTop(($('li').index($(".selected"))-1) * $('.main li').height());

$(".main ul").scrollTop(($('li').index($(".selected"))-1) * $('.main li').height());