jQuery平滑滚动不适用于Bootstrap 4导航栏

Question

I have this code for my navbar on a website I am making: 我在正在制作的网站上的导航栏有以下代码：

<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>

The scrollspy code doesnt work (got from w3Schools page) scrollspy代码不起作用（从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>

I'm really not sure if it's Bootstrap's navbar causing the issue or my jQuery or a combination of the two. 我真的不确定是引起问题的原因是Bootstrap的导航栏，还是我的jQuery或两者的结合。 I would appreciate any help given. 我将不胜感激。 I've also heard scrollspy can mess jQuery scripts that involve the navbar and/or parent element. 我还听说过scrollspy可能会使涉及navbar和/或父元素的jQuery脚本混乱。

Please note I am using Bootstrap 4 not 3. 请注意，我使用的不是Bootstrap 4，而是3。

Answer 1

The scrollspy works, you just need to assign ids to the areas you want to scroll to (each navbar item corresponds to an id ) scrollspy可以正常工作，您只需要向要滚动到的区域分配ID（每个导航栏项都对应一个id ）

For example, when you click on About , the JQuery looks for an id='about' somewhere on the page. 例如，当您单击About ，JQuery将在页面上的某处查找id='about' 。

hash is set equal to the href from the About link in the navbar, which is '#about' hash设置为等于导航'#about' About链接中的href ，即'#about'
$(hash).offset().top finds an element on the page with id='about' and returns its top coordinates. $(hash).offset().top在页面$(hash).offset().top找到id='about'的元素，并返回其顶部坐标。 The JQuery animate function is used to scroll to those coordinates. JQuery动画功能用于滚动到那些坐标。

The problem: 问题：

Currently you don't have any ids that can be targeted, so $(hash) doesn't return an element. 当前，您没有可定位的ID，因此$(hash)不返回任何元素。
offset() is then called on the undefined $(hash) , which produces an error. 然后在未定义的$(hash)上调用offset() ，这会产生错误。
You can't call offset() on undefined . 您不能在undefined上调用offset() 。

Here is a working demo of your scrollspy code with Bootstrap 4: CodePen Demo 这是使用Bootstrap 4的滚动代码的工作演示： CodePen演示

I also subtracted 60 pixels in the animate function like so: 我还在动画函数中减去了60个像素，如下所示：

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

This makes your scroll target 60px higher, which is helpful in this case so that your navbar doesn't hide the element you are scrolling to. 这样可使您的滚动目标60px ，这在这种情况下很有用，因此导航栏不会隐藏要滚动到的元素。

Answer 2

jQuery slim不包含动画功能。

jQuery平滑滚动不适用于Bootstrap 4导航栏

问题描述

2 个解决方案

解决方案1
0 2017-08-02 21:05:30

解决方案2
0 2017-10-10 22:10:22

jQuery平滑滚动不适用于Bootstrap 4导航栏

问题描述

2 个解决方案

解决方案1 0 2017-08-02 21:05:30

解决方案2 0 2017-10-10 22:10:22

解决方案1
0 2017-08-02 21:05:30

解决方案2
0 2017-10-10 22:10:22