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:

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.

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.

• javascript
• jquery
• html
• css
• scrolltop

2 Answers 2

I saw your codepen example and I noticed an error. The error is that you didn't add the actual scroll value. A simple example is that when you click and the scrollTop value is 0, it works fine, but when the scrollTop value is not 0 the destination value is not the same as the destination value when the scroll is 0. You can see the forked example here. Also, I remend you to use event.preventDefault() instead of return false;, to avoid the haschange or the URL redirecting.

Seems to work for me. Codepen -> http://codepen.io/mrmoje/pen/waBls

EDIT:

I edited my pen with your example & saw what you meant. (I also renamed some vars to reflect their true purpose)
So...., after logging the resulting scrolltop values in animate's callback, I found that #main's true target scrollTop value should be that of the target element's offset().top + the current (or pre-scroll) $(#main').scrollTop().

Checkout the updated pen to see what I mean.