jQuery滚动到锚点(减去设置的像素量)

Question

我使用以下代码在jQuery中滚动到锚点：

$(document).ready(function() {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');

  $('a[href*=#]').each(function() {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
        $(this).click(function(event) {
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
        });
      }
    }
  });

  // use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

});

有没有办法让它滚动到那个锚点，但减去一定数量的像素？(在我的例子中，我希望它是-92px)

谢谢你的帮助。

Answer 1

我不得不自己解决这个问题。您需要根据要scrollTo的像素量来调整偏移量。在我的例子中，我需要它在页面上高出50个像素。所以，我从targetOffset中减去50。

现在，代码中抛出问题的部分是location.hash --它告诉浏览器将其位置设置为特定点。在所有情况下，这都是一个包含您刚刚滚动到的ID的字符串。所以，它应该类似于'#foo‘。您需要维护它，所以我们不管它了。

但是，为了防止浏览器在设置了location.hash (默认浏览器操作)时“跳转”，您只需要阻止默认操作。因此，通过animate函数中的完成函数来传递事件'e‘。然后只需调用e.preventDefault()。您必须确保浏览器确实在调用事件，否则它将出错。所以，if-test可以解决这个问题。

好了。以下是修改后的代码块：

if (target) {
    var targetOffset = $target.offset().top - 50;
    $(this).click(function(event) {
      if(event != 'undefined') {
          event.preventDefault();}
      $(scrollElem).animate({scrollTop: targetOffset}, 400, function(e) {
          e.preventDefault();
          location.hash = target;
      });
    });
  }

Answer 2

这是我使用的：

function scrollToDiv(element){
    element = element.replace("link", "");
    $('html,body').unbind().animate({scrollTop: $(element).offset().top-50},'slow');
};

...where 50是要加/减的像素数。

Answer 3

这段代码为我工作在我的网站上的任何链接锚尊重"150px“的高度修复菜单在顶部。

<!-- SMOOTH SCROLL -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top-150
        }, 1000);
        return false;
      }
    }
  });
});
</script>
<!-- End of SMOOTH SCROLL -->