1

我有一个<UL>包含 10 个<LI>元素的元素，每个元素都很大（比如 200-300 像素高）。我也有一堆这些物品的替代品，它们很小而且总是可见的。当用户单击这些代理之一时，我想滚动<UL>以使相应的<LI>项目位于可见部分的中间<UL>（除非它是顶部或底部元素之一）。

我已经查看了一堆已经使用scrollTop:但无法弄清楚如何正确指定参数的示例。我创建了一个jsfiddle来说明这个问题。

澄清：

滚动必须在列表上操作，而不是在BODY元素上；它还必须有一个滚动条来手动操作列表滚动。列表只是复杂 UI 中的一个组件，其余元素不能通过此操作滚动。

4

1 回答 1

0

jsFiddle

这是你需要的吗？我稍微改变了你的标记。这是我用于滚动的功能：

$('.nav li a').click(function(e){
    e.preventDefault();
    var itemTop = $($(this).attr('href')).offset().top;
    var itemHeight = $($(this).attr('href')).height();
    var windowHeight = $(window).height();
    $('html,body').animate({scrollTop:itemTop + itemHeight/2 - windowHeight/2},500)
});

更新

如果您需要保持链接或“代理”始终在顶部可见，请尝试使用更新样式的这个小提琴

更新 2

这里的新尝试您可能只需要调整列表高度

于 2013-07-17T17:32:08.330 回答