Question

我基本上在div中有一个无序的列表项列表，它不能正确滚动到下一个元素。我只是想按一下按钮在列表中上下滚动。

虽然代码会滚动，但它与li元素不匹配。每次单击后，它会向上滚动一点，然后在下一次单击时向下滚动。我试过走DOM并验证它滚动到的元素是li元素，但没有看到问题。

我有以下 jsfiddle ： http://jsfiddle.net/YD9s5/9/

元素是：

ID为photos-div
ID为photos-li的无序列表（哎呀，暂时离开）
列出photo-li-X递增ID的项目，其中X是数字

用于滚动div的代码是：

        $('#photos-div').scrollTop($('#photo-li-' + i).offset().top);

正如您所见，i变量正在递增。

Answer 1

问题在于.offset()获取元素相对于整个文档的位置，并且该位置不断向上移动。因此，一旦您滚动到第1项，它就会返回文档中当前项目的.offset().top，现在该项目使用

将console.log( $('#photo-li-0').offset() );添加到scrollToElement()功能的顶部，您就会明白我的意思。请注意，顶部偏移量不断减小，当它从文档顶部移开时会快速移动到负数。

修复方法是取$('#photo-li-'+i)和$('#photo-li-0')（或容器$('#photos-li')本身）的偏移量之间的差异，然后滚动到它：

var newpos = $('#photo-li-' + i).offset().top - $('#photo-li-0').offset().top; $('#photos-div').scrollTop(newpos);

http://jsfiddle.net/mblase75/x4hQP/（包含其他改进）

Answer 2

.offset()似乎仅从文档顶部开始测量。您感兴趣的是#photos-div顶部元素的距离。 Here是一个工作版本，我手动跟踪div中的位置。请注意，在控制台中，当我记录.offset()的值时，它相对于文档而不是滚动div。

似乎应该有一种方法可以做到这一点，而不是在状态中携带该div的位置。正在努力......

这是我的more programatic solution。

jQuery .scrollTop（）不按预期滚动到li元素

2 个答案: