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); 
});