偏移平滑滚动引导程序JS

Question

我需要平滑滚动偏移100px。 到目前为止我有这个：

 $(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); }); 

这让我的链接感动！ 但是我怎么能添加.offset（）。top> 100呢？ 如果有人可以提供帮助，我会遇到问题。

Answer 1

ve1jdramas你好。
在这里看一下这个链接 。

在此示例中，它们使用+或- 。

像这样... scrollTop: target.offset().top -100
要么
scrollTop: target.offset().top +100

试试这个，看看你是否可以让它为你工作。
或者使用此完整代码。

$(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 -100
            }, 1000);
            return false;
          }
        }
      });
    });

Answer 2

听起来你有一个固定的导航栏。 假设你的锚是空的：

<a class="anchor" id="foo"></a>

只是偏移css中的锚点：

.anchor {
    top: -100px;
    position: relative;
    display: block;
}

或者，您可以通过更新您的javascript来抵消scrollTop：

scrollTop: $($anchor.attr('href')).offset().top - 100