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

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

3 个答案: