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

Question

我环顾四周，但我找到的所有答案都只有在用户位于页面顶部时才有效——否则，它会将用户带到错误的位置，因为它没有考虑到如何用户向下滚动了很多页面。这是我现在正在尝试的('.sidebar a' 是指向侧边栏中 anchor 标记的链接，'.site-wrap' 是可滚动的 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;
});

我似乎无法弄清楚为什么它不起作用。我是新手，所以这可能是微不足道的事情，但我很感激任何指向正确方向的指示。

Answer 1

如果我没记错的话，您只想滚动元素的位置，而不考虑当前滚动位置。

因此，将当前滚动位置从等式中取出并使用 jQuery 的 .position 函数而不是 .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;
});

如果当前元素是 .site-wrap 的直接子元素，则此方法有效。