Question

我有一个<UL>，其中包含10个<LI>元素，每个元素都很大（比如200-300px高）。我还有一些代理这些项目，这些项目很小并且始终可见。当用户点击其中一个代理时，我想滚动<UL>以使相应的<LI>项目位于可见部分的中间中<UL>（除非它是顶部或底部元素之一）。

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

澄清：

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

Answer 1

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)
});

<强>更新

如果您需要始终在顶部显示链接或“代理人”，请尝试使用更新的样式 this fiddle

更新2

新尝试 here 您可能只需要调整列表高度

使用javascript / jQuery将父级滚动到可见区域中间给定子项的位置

1 个答案: