jQuery smooth scroll doesn't work with Bootstrap 4 Navbar

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)

<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. I would appreciate any help given. I've also heard scrollspy can mess jQuery scripts that involve the navbar and/or parent element.

Please note I am using Bootstrap 4 not 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 )

For example, when you click on About , the JQuery looks for an id='about' somewhere on the page.

hash is set equal to the href from the About link in the navbar, which is '#about'
$(hash).offset().top finds an element on the page with id='about' and returns its top coordinates. The JQuery animate function is used to scroll to those coordinates.

The problem:

Currently you don't have any ids that can be targeted, so $(hash) doesn't return an element.
offset() is then called on the undefined $(hash) , which produces an error.
You can't call offset() on undefined .

Here is a working demo of your scrollspy code with Bootstrap 4: CodePen Demo

I also subtracted 60 pixels in the animate function like so:

$(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.

Answer 2

jQuery slim不包含动画功能。

jQuery smooth scroll doesn't work with Bootstrap 4 Navbar

Question

2 answers

solution1
0 2017-08-02 21:05:30

solution2
0 2017-10-10 22:10:22

jQuery smooth scroll doesn't work with Bootstrap 4 Navbar

Question

2 answers

solution1 0 2017-08-02 21:05:30

solution2 0 2017-10-10 22:10:22

solution1
0 2017-08-02 21:05:30

solution2
0 2017-10-10 22:10:22