javascript - 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 anchor 标记并将选择器修改为 $(".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;
     });
   });
 })