jquery - div 内出现意外的动画滚动顶部行为

Question

查看此JSFiddle .

HTML:

<div></div>

CSS:

div {
  margin-top: 100px;
  height: 200px;
  overflow-y: auto;
}

JavaScript:

for (var i = 1; i <= 100; i++)
  $("div").append('<span onclick="move(this)">' + i + '</span><br>');

function move(obj) {
  $("div").animate({scrollTop: $(obj).position().top});
}

我正在尝试使用 jQuery 在 div 中测试这个极其简单的动画滚动顶部。它应该将点击的数字带到 div 区域的顶部......但定位是不可预测的。我不会说它是随机的，因为我可以发现一种模式，但我无法理解它。

我尝试使用 .position().top、.offset().top 甚至 [0].getBoundingClientRect().top，结果是一样的。

此示例需要考虑哪些函数、计算或上下文才能正常工作？

Answer 1

您还需要添加 div 的当前滚动顶部

for (var i = 1; i <= 100; i++)
  $("div").append('<span onclick="move(this)">' + i + '</span><br>');

window.move = function(obj) {
    var top = $(obj).position().top;
       top  = $("div").scrollTop() + top
  $("div").animate({scrollTop: top});
}

请查找示例here