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中测试这个荒谬简单的动画scrollTop。它应该将点击的数字带到div区域的顶部......但是定位是不可预测的。我不会说它是随机的，因为我可以发现一个模式，但是我无法理解它。

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

此示例无法使用哪些功能，计算或上下文？

Answer 1

您还需要添加div的当前scrolltop

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

div内部出现意外的动画scrollTop行为

1 个答案: