jQuery .scrollTop()不按预期滚动到li元素

Question

我本质上在div中有一个无序的列表项列表,不能正确滚动到下一个元素.我只是想要一个按钮来向上和向下滚动列表.

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

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

要素是:

• 一个id为的滚动div photos-div
• ID为无序的无序列表photos-li(哎呀,暂时离开)
• 列出具有递增ID的项目,photo-li-X其中X是数字

用于滚动div的代码是:

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

该i变量递增,你可以看到.

Answer 1

问题是.offset()获取元素相对于整个文档的位置,并且该位置不断向上移动.所以,一旦你滚动到第1项,则返回.offset().top该项目1 目前有文件,这是现在所在的项目0 使用是.

添加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/(包含其他改进)