Question

我遇到了JQuery Smooth Scroll脚本的问题。除了最初按下锚点的任何链接外，一切正常。在页面加载后的第一次按下时，它会忽略偏移量。但是，如果我再单击另一个链接，则会识别偏移量。这适用于导航栏上的任何锚点链接。如果我返回到我先按下的那个，则会正确应用偏移。这只是最初的新闻。

我正在使用Bootstrap affix作为锚点链接所在的导航栏（这是我试图抵消的导航栏的高度）。

这是Smooth Scroll脚本：

(function ($) {

  var $navDepth;
  if (window.matchMedia("(max-width: 767px)").matches) {
    $navDepth = 0;
  } else {
    $navDepth = 57;
  }

  jQuery(document).ready(function ($) {
    $(".scroll").click(function (event) { // When a link with the .scroll class is clicked
      event.preventDefault(); // Prevent the default action from occurring
      $('html,body').animate({
        scrollTop: $(this.hash).offset().top - $navDepth
      }, 500); // Animate the scroll to this link's href value
    });
  });
})(jQuery);

HTML：

<nav id="main" class="clearfix affix-top">
<div class="inner clearfix">
    <div class="menu-home-menu-container">
        <ul id="menu-home-menu" class="menu l_tinynav1">
            <li id="menu-item-1944" class="scroll menu-item"><a class="scroll" href="#about-intro">About</a></li>
            <li id="menu-item-1945" class="scroll menu-item"><a class="scroll" href="#products-intro">Products</a></li>
            <li id="menu-item-1947" class="scroll menu-item"><a class="scroll" href="#projects-intro">Our Work</a></li>
            <li id="menu-item-1946" class="scroll menu-item"><a class="scroll" href="#news-intro">News</a></li>
            <li id="menu-item-58" class="scroll menu-item"><a class="scroll" href="#contact-intro">Contact</a></li>
        </ul>
    </div>
</div>

任何人都可以帮我指出正确的方向吗？我不确定它是否是JQuery限制，脚本的错误或我遗漏的东西。

初始链接上的Smooth Scroll Jquery偏移忽略

0 个答案: