jQuery的平滑滚动不与引导4导航栏的工作

我有我的导航栏这个代码的网站，我做的：jQuery的平滑滚动不与引导4导航栏的工作

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

的scrollspy代码does not工作

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

（从W3Schools的网站得到的）

我真的不确定它是Bootstrap的导航栏导致问题还是我的jQuery或两者的组合。我将不胜感激任何帮助。我也听说scrollspy可能会混淆涉及导航栏和/或父元素的jQuery脚本。

请注意我用的引导4不3.

来源

2017-08-02 Jack Spangenberg

的scrollspy的作品，你只需要分配ID要滚动的区域（每个导航栏项目对应一个id）

例如，当您单击About时，JQuery将在页面上某处寻找id='about'。

hash从在导航栏的About链路，这是'#about'
$(hash).offset().top找到页面上的元素与id='about'并返回它的顶部坐标来设定等于href。 JQuery动画函数用于滚动到这些坐标。

问题：

目前你没有，可以有针对性的任何标识，所以$(hash)不返回元素。
offset()然后在未定义的$(hash)上调用，这会产生错误。
您不能在undefined上致电offset()。

这里是你的scrollspy代码引导4工作演示：CodePen Demo

我也减去60个像素的动画功能，像这样：

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

这会让您的滚动目标60px更高，这在这种情况下很有帮助，因此您的导航栏不会隐藏您要滚动的元素。

来源

2017-08-02 21:05:30

这打破了我的Scrollspy，它没有工作。这里是一个小提琴： –

你检查了codepen吗？它在那里滚动。所有你需要的是滚动到的ID。你有一个导航栏滚动到当前不存在的页面部分。您可以使用滚动所需的ID标记部分。另外，我没有看到你的小提琴链接。 –

jquery slim不包含动画功能。

来源

2017-10-10 22:10:22 user947668

jQuery的平滑滚动不与引导4导航栏的工作

回答

相关问题