jquery - JQUERY CSS - 滚动条设置到所选选项可见

Question

我有一个显示菜单项的侧栏，它有垂直滚动条。如果我向下滚动并单击其中一个菜单项，则即将出现的页面将单击的菜单项显示为 selected 。但问题是我必须向下滚动才能看到选定的菜单项。有什么办法可以自动向下滚动到单击的（选定）菜单项？

这是http://jsfiddle.net/4XZMb/1944/

在这种情况下，我单击了“Datalog”，但它已关闭，我向下滚动以查看该菜单项

谢谢你的帮助。

<div id="sidemenu" style="height: 150px; width:200px; overflow-y: auto">
<ul class="nav nav-list">
    <li><a href="#">ActionScript</a></li>
    <li><a href="#">CHILL</a></li>                         
    <li><a href="#">C++</a></li>
    <li><a href="#">JAVA</a></li>
    <li><a href="#">Pascal</a></li>
    <li><a href="#">Cobol</a></li>
    <li class="active"><a href="#">Datalog</a></li>
    <li><a href="#">SQL</a></li>
    <li><a href="#">PL/SQL</a></li>
    <li><a href="#">ELAN</a></li>
</ul>   
</div>

Answer 1

是的，当然是这样。

$(document).ready(function(){
    $('#sidemenu').scrollTop($(".nav-list li.active").offset().top);
});

如果你愿意，你也可以这样做.animate()：

$(document).ready(function(){
    $('#sidemenu').animate({
        scrollTop: $(".nav-list li.active").offset().top
    }, 1000);
}); 

这是小提琴