我正在尝试创建一个小功能,用户可以单击左侧的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);
})
我的问题是我的代码似乎不起作用,因为右侧 div 内的 boxes
位置一直在变化。我不知道如何解决这个问题,它已经困扰我一段时间了。有人可以帮我解决这个问题吗?非常感谢!
最佳答案
当您滚动父 div 时,每个 div 的偏移量都会发生变化,您只需通过获取目标 div 的偏移量并添加当前父 div 的滚动位置来进行调整。只需更改代码中的一行即可运行。更改 animate
的 scrollTop
选项:
scrollTop: $('#'+id+'-test').offset().top
对此:
scrollTop: $('#'+id+'-test').offset().top + $('#items').scrollTop()
这是一个工作示例:http://jsfiddle.net/BPB7z/7/
关于jquery - 在我的例子中如何滚动 div ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20572254/