ブートストラップNavbar（トップバーと共に）アンカータグは、ナビゲーションバーの背後にあるコンテンツをナビゲートします

Question

私は同じページにアンカータグを持つnavbarとともにトップバーを持っています。アンカータグをクリックすると、アンカータグの内容がナビゲーションバーの後ろに表示されます。 HTML：：コードの下に見つけてください、私はをクリックした時はいつでもそう

$("#toplinks, #toplnks, #toplnked").on('click','a', function(event){ 
event.preventDefault(); 
var o = $($(this).attr("href")).offset(); 
var sT = o.top - $("#fixedbar").outerHeight(true); 
window.scrollTo(0,sT); 
}); 

：

ここ

.top-bar { 
     background: #EEEEEE; 
     border-bottom: 1px solid #ddd; 
    } 
    .top-bar .contact-details li { 
     display: inline-block; 
     padding: 8px 0; 
    } 
    .top-bar .contact-details li a { 
     font-size: 14px; 
     display: block; 
     margin-right: 15px; 
     color: #999; 
     line-height: 32px; 
    } 
    .top-bar .contact-details li a i { 
     padding-right: 5px; 
     vertical-align: middle; 
    } 
    .top-bar ul.social-list { 
     float: right; 
     padding: 8px 0; 
    } 
    .navbar-top.affix { 
     width: 100%; 
     top: 0; 
     z-index: 9999999; 
     -webkit-animation-duration: 1s; 
     animation-duration: 1s; 
     -webkit-animation-fill-mode: both; 
     animation-fill-mode: both; 
     -webkit-animation-name: fadeInDown; 
     animation-name: fadeInDown; 
    } 
    .navbar-top.affix .logo-wrapper { 
     margin-top: 15px; 
     margin-bottom: 18px; 
    } 
    .navbar-top.affix .logo-wrapper .navbar-brand img { 
     width: 100px; 
    } 
    .navbar-top.affix .navbar-nav > li { 
     padding: 15px 0!important; 
    } 
    .navbar-top.affix .search-side { 
     top: 15px; 
    } 
    .navbar-top.affix .full-search { 
     top: 67px; 
    } 
    .navbar { 
     margin-bottom: 0; 
     background: #fff; 
     border: none; 
     border-bottom: 1px solid #eee; 
     border-radius: 0; 
     -webkit-border-radius: 0; 
     -moz-border-radius: 0; 
     -o-border-radius: 0; 
    } 
    .logo-wrapper { 
     margin-top: 19px; 
     margin-bottom: 17px; 
     float: left; 
    } 
    .navbar-brand { 
     padding-bottom: 0px; 
     display: block; 
     height: auto; 
     padding-top: 0; 
    } 
    .navbar-default .navbar-nav { 
     margin-right: 5px!important; 
     position: relative; 
     transition: all 0.4s ease-in-out; 
     -moz-transition: all 0.4s ease-in-out; 
     -webkit-transition: all 0.4s ease-in-out; 
     -o-transition: all 0.4s ease-in-out; 
    } 
    .navbar-default .navbar-nav > li { 
     padding: 31px 0; 
    } 
    .navbar-default .navbar-nav > li > a { 
     color: #999; 
     display: block; 
     font-size: 14px; 
     font-family: 'Lato', sans-serif; 
     padding: 7px 16px; 
     text-transform: uppercase; 
     font-weight: 700; 
     border-radius: 0px; 
     position: relative; 
     overflow: hidden; 
     transition: all 0.3s ease-in-out; 
     -moz-transition: all 0.3s ease-in-out; 
     -webkit-transition: all 0.3s ease-in-out; 
     -o-transition: all 0.3s ease-in-out; 
    } 
    .navbar-default .navbar-nav > li:hover > a, 
    .navbar-default .navbar-nav > li > a.active { 
     color: #ffbb02; 
    } 
    .navbar-default .navbar-nav > li > a i { 
     margin: 0 -2px 0 -5px; 
    } 
    .navbar-default .navbar-nav .dropdown { 
     position: absolute; 
     left: 0; 
     top: 100%; 
     width: 260px; 
     background-color: #fff; 
     visibility: hidden; 
     z-index: 999; 
     opacity: 0; 
     transition: opacity 0.3s ease-in-out; 
     -moz-transition: opacity 0.3s ease-in-out; 
     -webkit-transition: opacity 0.3s ease-in-out; 
     -o-transition: opacity 0.3s ease-in-out; 
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
     -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    } 
    .navbar-default .navbar-nav > li.drop:hover .dropdown { 
     visibility: visible; 
     opacity: 1; 
    } 
    .dropdown li, 
    .sup-dropdown li { 
     position: relative; 
     border-bottom: 1px dotted #eee; 
    } 
    .dropdown li:last-child, 
    .sup-dropdown li:last-child { 
     border-bottom: none; 
    } 
    .dropdown li a, 
    .sup-dropdown li a { 
     display: block; 
     color: #666; 
     font-size: 14px; 
     font-family: 'Lato', sans-serif; 
     font-weight: 400; 
     padding: 11px 16px; 
     margin: 0; 
     text-decoration: none; 
     text-transform: capitalize; 
     transition: all 0.3s ease-in-out; 
     -moz-transition: all 0.3s ease-in-out; 
     -webkit-transition: all 0.3s ease-in-out; 
     -o-transition: all 0.3s ease-in-out; 
    } 
    .dropdown li a i { 
     margin: 0 0 0 -4px; 
    } 
    .navbar-default .navbar-nav .sup-dropdown { 
     position: absolute; 
     left: 100%; 
     top: 0; 
     width: 260px; 
     background-color: #fff; 
     margin-top: 10px; 
     transition: margin-top 0.2s ease-in-out; 
     -moz-transition: margin-top 0.2s ease-in-out; 
     -webkit-transition: margin-top 0.2s ease-in-out; 
     -o-transition: margin-top 0.2s ease-in-out; 
     visibility: hidden; 
     z-index: 3; 
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
     -o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
    } 
    .navbar-default .navbar-nav li.drop .dropdown li:hover .sup-dropdown { 
     visibility: visible; 
     margin-top: 0; 
    } 
    .dropdown > li:hover > a, 
    .sup-dropdown li:hover > a { 
     color: #fff; 
     background-color: #ffbb02; 
    } 
    .dropdown li a.active, 
    .sup-dropdown li a.active { 
     color: #fff; 
     background-color: #ffbb02; 
    } 
    .nav > li.drop:hover ul.dropdown { 
     display: block; 
     -webkit-animation: drop-up 400ms ease both; 
     -moz-animation: drop-up 400ms ease both; 
     -o-animation: drop-up 400ms ease both; 
     animation: drop-up 400ms ease both; 
    } 

    @media screen and (max-width: 767px) { 
     .js #wpb-mobile-menu { 
     display: none; 
     } 
     .js .slicknav_menu { 
     display: block; 
     } 
    } 

は私のJavascriptが私はstackoverflowの記事を通じて検索される：ここで

<body> 
     <!-- Full Body Container --> 
     <div id="container"> 
     <!-- Start Header Section --> 
     <header id="header-wrap" class="site-header clearfix"> 
      <!-- Start Top Bar --> 
      <div class="top-bar"> 
       <div class="container"> 
       <div class="row"> 
        <div class="col-lg-6 col-md-7 col-sm-8 col-xs-6"> 
        <!-- Start Contact Info --> 
        <ul class="contact-details hidden-xs"> 
         <li> 
         <a href="contact.html"> 
         <i class="icon-envelope"> 
         </i> 
         <span class="hidden-xs">the email address</span> 
         </a> 
         </li> 
         <li> 
         <a href="#"> 
         <i class="icon-call-out"> 
         </i> 
         <span class="hidden-xs"> Call Us: 123456789 </span> 
         </a> 
         </li>     
        </ul> 
        <!-- End Contact Info --> 
        </div> 
        <div class="col-lg-6 col-md-5 col-sm-4 col-xs-12"> 
        <!-- Start Social Links --> 
        <ul class="social-list"> 
         <li class = "hidden-sm hidden-md hidden-lg"> 
         <a href="#"> 
         <i class="icon-call-out"> 
         </i> 
         </a> 
         </li> 
         <li class = "hidden-sm hidden-md hidden-lg"> 
         <a href="#"> 
         <i class="icon-envelope"> 
         </i> 
         </a> 
         </li> 
         <li> 
         <a href="#" class="social-link facebook" title="Facebook" href="#"><i class="fa fa-facebook"></i></a> 
         </li> 
         <li> 
         <a href="#" class="social-link twitter" title="Twitter" href="#"><i class="fa fa-twitter"></i></a> 
         </li> 
         <li> 
         <a href="#" class="social-link google" title="Google Plus" href="#"><i class="fa fa-google-plus"></i></a> 
         </li> 
         <li> 
         <a href="#" class="social-link linkdin" data-toggle="tooltip" data-placement="bottom" title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a> 
         </li> 
        </ul> 
        <!-- End Social Links --> 
        </div> 
       </div> 
       </div> 
      </div> 
      <!-- End Top Bar --> 
      <!-- Start Logo & Navigation --> 
      <div id= "fixedbar" class="navbar navbar-default navbar-top" role="navigation" data-spy="affix" data-offset-top="50"> 
       <div class="container"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <!-- Stat Toggle Nav Link For Mobiles --> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        </button> 
        <!-- End Toggle Nav Link For Mobiles --> 
        <div class="logo-wrapper"> 
        <a class="navbar-brand" href="index.html"> 
         <img src="assets/img/logo6.png" alt="SB Construction"> 
        </a> 
        </div> 
       </div> 
       <!-- Brand and toggle menu for mobile ends --> 
       <div class="navbar-collapse collapse"> 
        <!-- Start Navigation List --> 
        <ul class="nav navbar-nav navbar-right"> 
        <li> 
         <a class="active" href="index.html">Home</a> 
         <ul class="dropdown"> 
          <li id= "toplinks"> 
           <a href="#whoweare"> 
           Who We Are 
           </a> 
          </li> 
          <li id= "toplnks"> 
           <a href="#ourvision"> 
           Our Mission 
           </a> 
          </li> 
          <li id= "toplnked"> 
           <a href= "#ourvision"> 
           Our Vision 
           </a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="services.html">Services</a> 
        </li> 
        <li> 
         <a href="contact.html">Contact</a> 
        </li> 
        </ul> 
        <!-- End Navigation List --> 
       </div> 
       </div> 

       <!-- Mobile Menu Start --> 
       <ul class="wpb-mobile-menu"> 
        <li> 
         <a class="active" href="index.html">Home</a> 
         <ul class="dropdown"> 
          <li id= "mbil1"> 
           <a href="#whoweare"> 
           Who We Are 
           </a> 
          </li> 
          <li id= "mbil2"> 
           <a href="#ourvision"> 
           Our Vision 
           </a> 
          </li> 
          <li id= "mbil3"> 
           <a href= "#ourmission"> 
           Our Mission 
           </a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="services.html">Services</a> 
        </li> 
        <li> 
         <a href="contact.html">Contact</a> 
        </li> 
       </ul> 
       <!-- Mobile Menu End --> 
      </div> 
      <!-- End Header Logo & Navigation --> 
      <div class="clearfix"></div> 
      </header> 
      <!-- End Header Section --> 

は私のCSSですアンカータグID "whoweare"の内容は、ページ上部（ナビゲーションバーの後ろ）から始まります。ナビゲーションバーの上部にはトップバーがあります。トップバーはスクロールバーに隠され、ナビゲーターバーは上部に配置されています。

また、インデックスページ（最初のページ）、トップバーとnavbarのコードを追加しました。他のページ（サービス、プロジェクトなど）に使用します。 Navbarが正しく機能するように手伝ってください。

Answer 1

私はそれが働いている...
これらの詳細な説明をお読みください。

最初：jQueryのを使用して
は、あなたが実際にあなたのHTML内に存在するセレクタを使用する必要があります。
ご使用のスクリプトでは、"#toplinks,#toplnks,#toplnkedおよび#fixedbarはまったく何も意味しません。

影響は、スクリプトが全くトリガされなかったということでした。 あなたが観察していたスクロール効果は、リンククリックの自然なデフォルト動作でした。

第二：
このスクリプトは、他のリンクと同じことを行うべきではありません2「の特殊なケース」を持っています。

1. 「セクション1」は、top-navを表示するためにウィンドウ位置ゼロにスクロールする必要があります。
   オフセットを計算すべきではありません。
   
   
2. 「セクション4」は、「セクション4-1」と「セクション4-2」を示すサブメニューを開きます。
   この「セクション4」もリンクであるため、無用のhref属性（href="#"）を削除する必要があります。
   スクリプトで、スクリプトエラーを避けるために$(this).attr("href")が定義されているかどうかをチェックする必要があります。
   

多くの説明が残っていますが、私はこのメニューを使って要素を追加することができます。

あなたは、スクリプトがサブメニュー項目で2回実行されることに注目してください。
イベントがその親に「bublling」しているためです（「セクション4」a）。
しかしこれは大きな問題ではありません。

この「バブリング」効果を停止しようとすると、メニューの[ブートストラップ]アクションが中断されます。
最後のページにあるconsole.log()をすべて削除またはコメントアウトしてください。
;）ここで

）はスクリプト
であり、ここであなたと遊ぶ（と私はそれが働いて作られたかを確認することができCodePen、です。

console.clear() 
console.log("READY!"); 

$(".navbar-nav li").on('click','a', function(event){ 
    event.preventDefault(); 

    // Which link was clicked? 
    console.log($(this).attr("href")); 

    // Section 1 case: 
    if($(this).attr("href")=="#section1"){ 
    $("body").scrollTop(0); 
    console.log("Window simply has to scroll to position: 0"); 
    } 

    // Section 4 case (Or any link which triggers a sub-menu) 
    if(typeof($(this).attr("href"))=="undefined"){ 
    console.log("This link shall NOT trigger a scroll."); 
    } 

    // All the other cases. 
    if(typeof($(this).attr("href"))!="undefined" && $(this).attr("href")!="#section1"){ 

    var o = $($(this).attr("href")).offset(); 
    var sT = o.top - $(".navbar").outerHeight(true); 
    window.scrollTo(0,sT); 

    console.log("Section offset is: "+o.top); 
    console.log("Nav bar height is: "+$(".navbar").outerHeight(true)); 
    console.log("Window has to scroll to position: "+sT); 

    } 

    // Just an empty console line for clarity. 
    console.log(""); 
});