Javascript jQuery:targetposition"；更改“；滚动到a内的位置时<；部门>；

我已经试过看类似的问题，但它们都不能完全回答我的问题。下面的代码可以很好地滚动$（'html，body'），但是当我用$（'my div'）替换它时，它就不起作用了

我准备了一把小提琴，如果你想玩一会儿的话：-要测试我的问题，请按“二”或“三”按钮多次（或先按“二”再按“三”）

代码：

CSS

#test-me{
  width:100%; 
  height:120px; 
  position: relative; 
  overflow:auto;
  border:1px solid silver;
}

$('button').on('click', function() {

    var target = $(this).attr('data-target');

    var targetPosition  = $(target).position(); 

    $('#test-me').animate({
        scrollTop : targetPosition.top
    }, 425);

});

HTML

<div id="test-me">
    <h1  id="one">One</h1>
    <p>...</p>
    <h1 id="two">Two</h1>
    <p>...</p>
    <h1 id="three">Three</h1>
    <p>...</p>
</div>

<p>
    <button data-target="#one">One</button> 
    <button data-target="#two">Two</button>  
    <button data-target="#three">Three</button>
</p>

正如我已经说过的，它适用于：

$('html,body').animate({
  scrollTop : targetPosition.top
}, 425);

---

那么，为什么它不适合这个职位：相对div？非常感谢您的帮助！：）如果我能解决这个问题，我会让每个人都知道的。

我做了一个scrollTo插件来实现这一点，它是基于我不久前发现的另一个例子

使用它，您将不需要数据属性

$('button').on('click', function() {

var idx = $(this).index();
var targetObj = $($("#test-me h1").get(idx));

$("#test-me").scrollTo(targetObj, 425);

});

---

我做了一个scrollTo插件来实现这一点，它是基于我很久以前发现的另一个例子

使用它，您将不需要数据属性

$('button').on('click', function() {

var idx = $(this).index();
var targetObj = $($("#test-me h1").get(idx));

$("#test-me").scrollTo(targetObj, 425);

});

---

好的，你的小提琴似乎很好用！我将仔细研究它，并将您的方法应用到我的实际代码中。所以：非常感谢！这为我节省了很多时间：）（附言：我不想因为几个原因而忽略数据属性。但是谢谢你的建议。）随时都可以。我认为现在使用数据属性修改代码是很容易的。：）好的，你的小提琴似乎很好用！我将仔细研究它，并将您的方法应用到我的实际代码中。所以：非常感谢！这为我节省了很多时间：）（附言：我不想因为几个原因而忽略数据属性。但是谢谢你的建议。）随时都可以。我认为现在使用数据属性修改代码是很容易的。：）