Question: I have a simple blog, and each blog post has a number of images ranging from 1 to 10. If you click on any of the images in the post, it should scroll you down to the next post. I thought something as simple as this would've worked:

```
$('.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);
});

```

But when I click another image, except for the first one, it just scrolls to an odd position.

I managed to achieve this with some help, and you can see the output here: <http://jsfiddle.net/w7rtcmp0/3/> which works great, but the difference for me is that my content is in a scrollable div (hence `.journal-container` and not `html, body`.

Any ideas why I am having this issue? I have created a jsFiddle with the scrollable div, and if you click an image further down... it replicates this issue... so hopefully this helps.

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

Thanks.

Answer: 
jQuery adjusts `offset().top()` based on the current scroll position.

Using JavaScript's `offsetTop` property should fix the problem:

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

```

Fiddle: **<http://jsfiddle.net/m7cm5oL6/>**
You may want to look at [Ariel Flesler's jQuery `scrollTo` plugin](http://demos.flesler.com/jquery/scrollTo/), I had the same issue and using this saved me hours of debugging.