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 。

任何想法為什么我有這個問題？ 我創建了一個帶有可滾動div的jsFiddle，如果您在更下方單擊圖像...它將復制此問題...因此希望對您有所幫助。

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的jQuery scrollTo插件 ，我遇到了同樣的問題，使用它節省了我大量的調試時間。

Answer 3

所以我認為您嘗試使用錯誤的高度。

在這里，我設置了一個height變量，並將其設置為當前日志/博客對象的高度。 這使我可以一直滾動到下一個可用的博客對象。

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