I have a tried and tested bit of code that has always worked well for me but I'm trying something new with it. I'm not using the body's scroll position but instead I have a div with the ID of #main that has an overflow of auto.

The problem I'm having is that when you click a page link (from either inside or outside the #main div) the page moves but not to the correct position. What could be causing this issue

$('.scrollto').click(function() {

       var elementClicked = $(this).attr(href);

       var destination = $(elementClicked).offset().top;

       $(#main:not(:animated)).animate({ scrollTop: destination} );

       return false;

});

Here's #main's CSS:

#main { 

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: auto;

  height: auto;

  z-index: 2;

  overflow: auto;

  overflow-x: hidden;

  background: #fff;

  -webkit-overflow-scrolling: touch;

}

EDIT

With a little bit of help from @Moje, I have recreated the issue here: http://codepen.io/anon/pen/xbLyJ

Click the Click me to go to Target 1 link. Within that section you'll see another link to go to Target 2. Click that and it won't fully go down to the correct ID. If you keep clicking that same link the page will go up and down each time you do it.