jQuery緩動后href導航鏈接不起作用

Question

我在http://deliciousproductions.com.au網站上有一個導航欄，並且導航欄中的href鏈接似乎無效，＃about的href內容有效，但對於諸如home之類的實際鏈接卻無效。

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#home">Delicious Productions</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="http://deliciousproductions.com.au">HOME</a></li>              
            <li><a href="#about">ABOUT</a></li>
            <li><a href="http://deliciousproductions.com.au/recipes">RECIPES</a></li>   
            <li><a href="#contact">CONTACT</a></li>     
        </ul>
    </div>
</div>
</nav>

我覺得它應該可以正常工作，但是也許這個腳本會由於onclick而干擾？

    $(document).ready(function(){
  // Add smooth scrolling to all links in navbar
  $(".navbar a").on('click', function(event) {

// 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 (900) specifies the number of milliseconds it takes    to scroll to the specified area
 $('html, body').animate({
 scrollTop: $(hash).offset().top
}, 1600, 'easeInOutCubic', function(){

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

干杯，還是防止違約？

Answer 1

您正確的$(".navbar a")選擇器選擇了所有鏈接，並阻止了默認行為event.preventDefault();

嘗試添加類scroll到a錨標記，並修改您的選擇，以$(".navbar a.scroll")選擇。

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#home">Delicious Productions</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="http://deliciousproductions.com.au">HOME</a></li>              
            <li><a class="scroll" href="#about">ABOUT</a></li>
            <li><a href="http://deliciousproductions.com.au/recipes">RECIPES</a></li>   
            <li><a class="scroll" href="#contact">CONTACT</a></li>     
        </ul>
    </div>
</div>
</nav>


$(document).ready(function(){
  // Add smooth scrolling to all links in navbar
  $(".navbar a.scroll").on('click', function(event) {

    // 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 (900) specifies the number of milliseconds it takes    to scroll to the specified area
     $('html, body').animate({
       scrollTop: $(hash).offset().top
     }, 1600, 'easeInOutCubic', function(){

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