jquery - 在我的例子中如何滚动 div ？

Question

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

例如，用户单击第二个链接，右侧 div 将滚动到该 div 内的第二个 box。

这是 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 的滚动位置来进行调整。只需更改代码中的一行即可运行。更改 animate 的 scrollTop 选项:

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

对此:

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

这是一个工作示例:http://jsfiddle.net/BPB7z/7/