スムーズなスクロールjavascriptコードがブートストラップで邪魔になるタブコード

Question

ページのナビゲーションをスムーズにスクロールできるよう、次のコードを書いています。 スムーズスクロールはアンカータグのクリックで発生するため、アンカータグを使用するタブ用のBootstrap Javascriptを使いこなします（これは私が結論したものです。私は正しいと願っています）。誰かがこれをやっているものにいくつかの光を入れてくださいすることができます

$(function() { 
$('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
      $('html, body').animate({ 
       scrollTop: target.offset().top 
      }, 1000); 
      return false; 
     } 
    } 
}); 
}); 

今私は、このコードの$('a[href*="#"]:not([href="#"])')部分を理解していませんか？また、上記の関数が発生するようにこれを修正するにはページのアンカーでをクリックしますか？セレクタの上

Answer 1

a[href*="#"]:not([href="#"])

なくなっターゲットはHREF = "＃1 smthing" とタグです。したがって、デフォルトでは、ブートストラップタブの機能は無効になります。

代わりに、CSSの特異性が向上します。 使用し、親クラス

$(function() { 
    $('.myParent a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
}); 
});