在jquery缓动之后，href nav链接无法正常工作

I have a navbar at the site http://deliciousproductions.com.au and the href links in the navbar don't seem to work, the href stuff for #about works but not for actual links like home.

我在网站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>

I feel like it should just be working but maybe this script is interfering because of the onclick?

我觉得它应该只是工作，但也许这个脚本因为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;
   });
 });
 })

cheers, or the prevent default?

欢呼，还是防止默认？

1 个解决方案

#1

You are right the $(".navbar a") selector selects all your link, and prevents the default behaviour event.preventDefault();

你是对的$（“。navbar a”）选择器选择你所有的链接，并防止默认行为event.preventDefault（）;

Try adding a class scroll to the a anchor tag and modify your selector to $(".navbar a.scroll") selector.

尝试将类滚动添加到锚标记并将选择器修改为$（“。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;
     });
   });
 })

#1