jQuery/JS - 滚动到点击下一个元素（滚动div问题）

Question

我有一个简单的博客，每个博客文章有一系列图像范围从1到10.如果您单击任何图像的帖子，它应该向下滚动到下一篇文章。我想的那么简单，因为这将工作过的东西：

$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function() { 
    var $this = $(this); 
    $('.journal-container').animate({ 
     scrollTop: $this.closest('.each-journal-entry').next().offset().top 
    }, 500); 
}); 

但是当我点击另一个图像，除了第一个，它只是滚动到一个奇怪的位置。

我设法与一些帮助实现这一点，你可以在这里看到的输出：http://jsfiddle.net/w7rtcmp0/3/伟大的工程，但对我来说不同的是，我的内容是在一个可滚动的div（因此.journal-container而不是html, body

。

为什么我有这个问题的任何想法？我创建了一个的jsfiddle与滚动的div，如果你单击图像进一步下跌...它复制这个问题......所以希望这有助于。

http://jsfiddle.net/w7rtcmp0/5/

谢谢。

Answer 1

jQuery的基于当前的滚动位置调整offset().top()。

使用JavaScript的offsetTop属性应该解决这个问题：

scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop 

小提琴：http://jsfiddle.net/m7cm5oL6/

Answer 2

你可能想看看Ariel Flesler's jQuery scrollTo plugin，我有同样的问题，并使用这节省了我几个小时的调试。

Answer 3

所以我认为你试图使用错误的高度。

这里我设置了一个高度变量并将其设置为当前日记/博客对象的高度。这使我可以将我的高度一直滚动到下一个可用的博客对象。

http://jsfiddle.net/w7rtcmp0/24/

$('.each-journal-entry .slider-container .journal-slider .each-slide img').on('click', function()  { 
    $this = $(this); 
    var height = $this.closest('.each-journal-entry').height(); 

    $('.scrollable').animate({ 
    scrollTop: height 
    }, 2000); 
});