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;
     });
   });
 })