当用户已经向下滚动页面时，如何导航到锚标记？

Question

I've looked around, but all of the answers I've found only work when the user is at the top of the page - otherwise, it takes the user to the wrong location because it doesn't take in account how much the user has scrolled down the page. Here's what I'm trying right now ('.sidebar a' is a link to an anchor tag in the sidebar, '.site-wrap' is the scrollable div):

$('.sidebar a').click(function() {
  var $url = $(this).attr('href');
  var $offset =  $($url).offset(); //Getting the position of the anchor
  var $currPos = $('.site-wrap').scrollTop(); //Getting the current scrolled position
  $('.site-wrap').animate({
    scrollTop: $offset.top - $currPos
  }, 1000);
  return false;
});

I can't seem to figure out why it isn't working. I'm a newbie, so it's probably something trivial, but I'd appreciate any pointers in the right direction.

Answer 1

If I'm not mistaken, you just want to scroll the position of your element, regardless of the current scroll position.

So it should be enought to take the current scroll position out of the equation and use jQuery's .position function instead of .offset :

$('.sidebar a').click(function() {
  var $url = $(this).attr('href');
  var $offset =  $($url).position(); //Getting the position of the anchor
  $('.site-wrap').animate({
    scrollTop: $offset.top
  }, 1000);
  return false;
});

This works, if the current element is a direct child of .site-wrap .