Question

我在我正在制作的网站上有我的导航栏的代码：

<body data-spy="scroll" data-target="#navbar" data-offset="20">
  <!-- navbar -->
  <div id="home">
    <div id="navbar">
      <nav class="navbar navbar-toggleable-md navbar-light bg-faded hidden-sm-down fixed-top mb-0">
        <div class="container">
          <a class="navbar-brand" href="#">honesty</a>
          <div class="navbar-collapse justify-content-end" id="navCollapse">
            <ul class="navbar-nav smooth-scroll">
              <li class="nav-item">
                <a class="nav-link smooth-scroll" href="#home">Home</a>
              </li>


              <li class="nav-item">
                <a class="nav-link smooth-scroll" href="#about">About</a>
              </li>


              <li class="nav-item">
                <a class="nav-link smooth-scroll" href="#portfolio">Portfolio</a>
              </li>


              <li class="nav-item">
                <a class="nav-link smooth-scroll" href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>

scrolllspy代码不起作用（来自w3Schools页面）

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      // Add smooth scrolling to all links
      $("a").on('click', function(event) {

        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();

          // Store hash
          var hash = this.hash;

          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 800, function() {

            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        } // End if
      });
    });
  </script>

我真的不确定Bootstrap的导航栏导致问题或我的jQuery或两者的组合。我很感激任何帮助。我也听说过scrollspy会搞乱涉及导航栏和/或父元素的jQuery脚本。

请注意我使用的是Bootstrap 4而不是3。

Answer 1

“scrollspy”有效，您只需要将id分配给要滚动的区域（每个导航栏项对应id）

例如，当您单击About时，JQuery会在页面的某处查找id='about'。

hash设置为等于导航栏中href链接的About，'#about'
$(hash).offset().top在页面上找到id='about'的元素并返回其顶部坐标。 JQuery animate函数用于滚动到那些坐标。

问题：

目前，您没有可定位的任何ID，因此$(hash)不会返回元素。

offset()

$(hash)，这会产生错误。
您无法在offset()上致电undefined。

以下是使用Bootstrap 4的滚动代码的工作演示： CodePen Demo

我还在动画函数中减去60像素，如下所示：

$(hash).offset().top - 60

这会使您的滚动目标60px更高，这在这种情况下很有用，这样您的导航栏就不会隐藏您要滚动的元素。

Answer 2

jquery slim 不包含动画功能。

jQuery平滑滚动不适用于Bootstrap 4 Navbar

2 个答案: