BootstrapV4& jQuery:我正在努力运行流畅的滚动但不成功

时间:2017-07-31 11:48:47

标签: jquery twitter-bootstrap smooth-scrolling scrollspy

jQuery用于平滑滚动,但它没有工作。我在主体中添加了scrollspy,似乎我的代码不接受任何jQuery。



 <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 type="text/javascript">
     $(function() {
        $('#scrollspy-nav').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              $('html,body').animate({
                scrollTop: target.offset().top-55
              }, 1500);
              return false;
            }
          }
        });
      });

    </script>
&#13;
Navigation of bootstrap v4. Also, I cannot set offset in the navigation. Navigation links also include the href.

      <nav id="scrollspy-nav" class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="index.php">Benori Ventures
        </a>
        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul class="nav">
            <li class="nav-item active">
              <a class="nav-link" href="#section0" role="tab">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section1">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section2">Investment Category</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section3">Criteria</a>
            </li>
              <li class="nav-item">
              <a class="nav-link" href="#section4">Portfolio</a>
            <!--  </li>
              <li class="nav-item">
              <a class="nav-link" href="">Team</a>
            </li> -->
            <li class="nav-item">
              <a class="nav-link btn btn-primary" href="#" target="_blank" style="color:#FFF;">Apply Now</a>
            </li>
          </ul>
        </div>
      </nav>
    
&#13;
&#13;
&#13;

0 个答案:

没有答案