Question

最近我实现了CSS-Tricks给出的平滑滚动，以及单击选项时关闭导航栏的解决方案。问题是，如果没有用于关闭导航的引导脚本，则滚动工作完美并准确地停在锚点上。

但是，只要我添加自动引导程序导航关闭的代码，当我继续单击链接时，它会转到所需的锚点，错过它，继续然后突然回到锚点。

可能是什么问题？

我希望有人能够帮助我。我已在下面附上相关的代码。

CSS Tricks提供的平滑滚动：

<script>
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
      &&
      location.hostname == this.hostname
    ){
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });
</script>

用于关闭bootstrap 3.x导航的JavaScript代码：

<script>
  $('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
  });
</script>

我的HTML代码：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">

    <!-- Navigation logo and dropdown icon -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
      data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#" id="logo">LOGO</a>
    </div>

    <!-- Navigation Options -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right" id="nav-appearance">
        <li id="main-nav"><a href="#home">Home <span class="sr-only">(current)</span></a></li>
        <li id="main-nav"><a href="#about">About Us</a></li>
        <li id="main-nav"><a href="#services">Services</a></li>
        <li id="main-nav"><a href="#gallery">Gallery</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

不是100％确定，但看起来滚动脚本会触发并计算文档中的位置以滚动并随着时间的推移动画。

同时你的导航被折叠并从文档流中删除，这意味着现在的位置计算已经关闭，因此当动画完成时，它已超出所需的位置。

滚动脚本然后调用一个回调函数，该函数将焦点放在目标元素上，但是当它离开页面时会产生焦点，导致它快速恢复页面，使焦点元素可见。

如果您可以在引导程序崩溃脚本之后调用滚动脚本，则应解决此问题。

Bootstrap导航锚比预期的更远，然后快照回来，为什么？

1 个答案: