Javascript jQuery/JS–；单击后滚动到下一个元素（可滚动div问题）

我有一个简单的博客，每一篇博客文章都有从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);
});

但是，当我单击除第一个图像外的另一个图像时，它只是滚动到一个奇怪的位置

我在一些帮助下设法实现了这一点，您可以在这里看到输出：这非常有效，但对我来说，不同之处在于我的内容位于可滚动的div中（因此

.journal container

，而不是

html，body

）

你知道我为什么会有这个问题吗？我已经创建了一个带有可滚动div的jsFiddle，如果你再往下点击一个图像…它会复制这个问题…希望这会有所帮助

---

谢谢。

您可能想看看，我也遇到了同样的问题，使用它节省了我数小时的调试时间。

所以我认为您尝试使用了错误的高度

在这里，我设置了一个高度变量，并将其设置为当前日志/博客对象的高度。这允许我将高度一直向下滚动到下一个可用的博客对象

---

jQuery根据当前滚动位置调整偏移量（）.top（）

使用JavaScript的

offsetTop

属性可以解决以下问题：

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

---

小提琴：

您是否将其插入

$（窗口）.load（）中

？@DOCASAREL我没有…我应该吗？我以为上的

。函数可以解决这个问题？@braw，你很好。这不是负载问题。我会使用id和锚定哈哈。@AndrewIce我想这可能也是明智之举。因此，如果我单击一个图像，它可以转到新的哈希？如果只有两个日志，这是有效的ntries，但不适用于后续条目。
scrollTop: $this.closest('.each-journal-entry').next()[0].offsetTop