Question

我正在尝试创建一个小功能，用户可以点击左侧nav链接，右侧div将滚动到相应的框。

例如，用户点击第二个链接，右侧div将滚动到box内的第二个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>

这是javascript：

$('#nav a').on('click', function(){

    var id=$(this).attr('id')
    alert(id)

$('#items').animate({
      scrollTop: $('#'+id+'-test').offset().top
           }, 700);      
    })

http://jsfiddle.net/BPB7z/3/

我的问题是我的代码似乎不起作用，因为右边div中的boxes位置一直在变化。我不知道如何解决这个问题，这让我困扰了一段时间。有人可以帮我解决这个问题吗？非常感谢！

Answer 1

当您滚动父div时，每个div的偏移量都会发生变化，您只需要通过获取目标div的偏移量并添加当前父div的滚动位置来进行调整。只需更改代码中的一行即可。更改scrollTop的{{1}}选项：

animate

到此：

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

以下是一个工作示例：http://jsfiddle.net/BPB7z/7/

Answer 2

试试这个：http://jsbin.com/iZUVoBux/1/edit你可以看到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？

2 个答案: