Jquery 如何在我的案例中滚动div？

我正在尝试创建一个小功能，用户可以单击左

nav

链接，右div将滚动到相应的框中

例如，用户单击第二个链接，右侧的

div

将滚动到该

div

内的第二个

框

以下是HTML：

<div id='nav'>
   <ul>
     <li><a id='link1' class='link' href='#'>test 1</a><li>
     <li><a id='link2' href='#'>test 2</a><li>
     ...
     <li><a id='link16' href='#'>test 16</a><li>
  </ul>
</div>

<div id='items'>
    <div id='link1-test' class='box'>
        test 1
     </div>
    <div id='link2-test' class='box'>
        test 2
     </div>
   ...
     <div id='link16-test' class='box'>
        test 16
     </div>
</div>


我的问题是我的代码似乎不起作用，因为右侧div中的
框
位置一直在变化。我不知道如何解决这个问题，这一直困扰着我一段时间。有人能帮我一下吗？非常感谢
 试试这个：你可以看到div有不同的高度。您应该使用.position（）.top，但在滚动div时，值很快就会更改

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
   return {
      top: _y,
      left: _x
  };
}


$('#nav a').on('click', function () {
   $('#items').animate({
      scrollTop: getOffset($('#' + this.id + '-test').get()[0]).top
   }, 700);
});

试试这个：你可以看到div有不同的高度。您应该使用.position（）.top，但在滚动div时，值很快就会更改

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
   return {
      top: _y,
      left: _x
  };
}


$('#nav a').on('click', function () {
   $('#items').animate({
      scrollTop: getOffset($('#' + this.id + '-test').get()[0]).top
   }, 700);
});

当您滚动父div时，每个div的偏移量都在变化，您只需通过获取目标div的偏移量并添加当前父div的滚动位置来进行调整。只需更改代码中的一行，它就会工作。从以下内容更改
动画
的
滚动顶
选项：

scrollTop: $('#'+id+'-test').offset().top

为此：

scrollTop: $('#'+id+'-test').offset().top + $('#items').scrollTop()

下面是一个工作示例：
滚动父div时，每个div的偏移量都在变化，您只需通过获取目标div的偏移量并添加当前父div的滚动位置来进行调整。只需更改代码中的一行，它就会工作。从以下内容更改
动画
的
滚动顶
选项：

scrollTop: $('#'+id+'-test').offset().top

为此：

scrollTop: $('#'+id+'-test').offset().top + $('#items').scrollTop()

下面是一个工作示例：
您尝试过scrollTo jQuery插件吗？@AamirAfridi我尝试过，但结果相同…您尝试过scrollTo jQuery插件吗？@AamirAfridi我尝试过，但结果相同。。。