I'm trying to implement a custom content scroller. Basically the idea is that upon a button click the contents of the container is scrolled horizontally to an element within the container that has a class of `page`. The element that has class `page` gets changed on each click, so there is always a new element to scroll to.

```
$('.next').on('click', function() {
    $('#container').animate({
        scrollLeft: $(this).find('.page').position().left
    }, 1000);
});

```

This works fine on the first click but the second click doesn't work. Subsequent clicks do work but not every time.

I think because it's trying to scroll to a particular value, it is not getting the correct value perhaps.

Is it possible to just smooth scroll to a given element rather than its positional value?