<a>タグは他のページにリンクしていません

Question

1ページのレイアウトと複数のセクションを作成し、これらのセクションのナビゲーションバーへのリンクを追加しました。ページをスムーズにスクロールするためのjQueryがあります。しかし、私が他のページにリンクしたいのであれば、それはうまくいきません.Jqueryを削除するとうまくいきます。あなたがにクリックイベントをバインドしている

$(function(){ 
    $('.CHOSEN_CLASS').on('click', function(event){ 
     event.preventDefault(); 

     $('html, body').animate({ 
      scrollTop: $($.attr(this, 'href')).offset().top 
     }, 500); 
    }); 
}); 

Answer 1

が良いだろうすべてのリンク要素、同じページ内のリンクだけではありません。それが唯一の断片とのリンクをキャプチャするように、あなたのセレクターを変更します。

... 
$(document).on('click', 'a[href*="#"]', function(event){ 
... 

Answer 2

を：あなたは#linkが含まれている<a>に任意のクラスを追加し、このようにあなたのJSをヒモ場合

$(function(){ 
 
    $(document).on('click', 'a', function(event){ 
 
     event.preventDefault(); 
 
    
 
     $('html, body').animate({ 
 
      scrollTop: $($.attr(this, 'href')).offset().top 
 
     }, 500); 
 
    }); 
 
});

<nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#hero">Home</a></li> 
 
      <li><a href="service.html">Services</a></li> 
 
      <li><a href="#contact-form">Contact</a></li> 
 
      <li><a href="#about-us">About Us</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

Answer 3

これは、通常通り作業からのリンクを防ぐことができます：

event.preventDefault(); 

私はアンカーされているリンク上でクラスを置くことをお勧めしたいですとjQueryを更新してそれらのクラスをターゲットにしてください。 あなたはあなたのjQueryのは、ページ内のすべての `A`タグに適用されます

<ul class="nav navbar-nav"> 
    <li><a href="#hero" class="anchor-link">Home</a></li> 
    <li><a href="service.html">Services</a></li> 
    <li><a href="#contact-form" class="anchor-link">Contact</a></li> 
    <li><a href="#about-us" class="anchor-link">About Us</a></li> 
    </ul> 


$(function(){ 
    $(document).on('click', '.anchor-link', function(event){ 
     event.preventDefault(); 

     $('html, body').animate({ 
      scrollTop: $($.attr(this, 'href')).offset().top 
     }, 500); 
    }); 
});