如何在点击时让另一个 div 滚动到我当前的 div

Question

将一列图像彼此放在一起。我在该列的右侧还有一个 div，其中有几个注释（基本上是段落）。当您单击每个图像时，会出现一组新注释。理想情况下，当您向下滚动页面并单击每个图像时，我希望右侧的 div 向下滚动并与单击的每个图像匹配。我写了一个函数，但我只能让整个页面滚动到顶部，但我需要的是相反的。我正在使用 scrollTop: 这导致了我认为的问题，但没有 scrollTo 功能？这是我的代码。

HTML

<div id='main'>
 ...content...
</div>

 <div id='rightnav'>
 ...content...
 </div>

jQuery

$('html, #rightnav').animate({
     scrollTop: $($current_image).offset().top
}, 2000);

Answer 1

您只需将.animate() 应用于导航DIV 本身。并且只为“顶部”样式设置动画。 例如这段代码：

$('#main img').click(function() {

    $('#rightnav').animate({top: $(this).offset().top}, 2000)

})

会将 ID = "rightnav" 的 DIV 带到与在 "main" DIV 内单击的图像相同的顶部坐标。

演示：http://jsfiddle.net/vSfP9/1/