Bootstrap Nav使命名鏈接在導航欄下滾動

Question

我無法弄清楚爲什麼引導程序命名鏈接在nav容器下（後面）滾動。我怎樣才能得到它來定位「容器」，因此它使用導航欄的底部作爲頁面的頂部？

效果可以看這裏：https://jsfiddle.net/9azLc6sz/

<div class="navbar navbar-default navbar-fixed-top" > 

     <div class="container" > 

      <div class="navbar-header" > 

       <a href="index.html" class="navbar-brand" >scroll test</a> 

       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main" > 
        <span class="icon-bar" ></span> 
        <span class="icon-bar" ></span> 
        <span class="icon-bar" ></span> 
       </button> 

      </div> 

      <div class="navbar-collapse collapse" id="navbar-main" > 
       <!-- nav loaded via ajax, js call at bottom of page --> 

       <ul class="nav navbar-nav" > 

        <li class="dropdown" > 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="sections" >Sections <span class="caret" ></span></a> 

         <ul class="dropdown-menu" aria-labelledby="sections" > 
          <li><a href="main.html" >Main</a></li> 
          <li class="divider" ></li> 
          <li><a href="a.html" >A</a></li> 
          <li><a href="b.html" >B</a></li> 
          <li><a href="c.html" >C</a></li> 
         </ul> 

        </li> 

        <li class="dropdown" > 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="Asec" >A <span class="caret" ></span></a> 

         <ul class="dropdown-menu" aria-labelledby="Asec" > 
          <li><a href="A.1.html" >A Get Started</a></li> 
          <li><a href="A.2.html" >How to A</a></li> 
          <li><a href="A.4.html" >A Process</a></li> 
         </ul> 

        </li> 


        <li class="dropdown" > 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="Bsec" >B <span class="caret" ></span></a> 

         <ul class="dropdown-menu" aria-labelledby="Bsec" > 
          <li><a href="B.1.html" >B Get Started</a></li> 
          <li><a href="B.2.html" >Create a B</a></li> 
         </ul> 

        </li> 


        <li class="dropdown" > 
         <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="Csec" >C <span class="caret" ></span></a> 

         <ul class="dropdown-menu" aria-labelledby="Csec" > 
          <li><a href="C.1.html" >C Overview</a></li> 
          <li><a href="C.2.html" >C Information</a></li> 
          <li><a href="C.3.html" >C Posting</a></li> 
         </ul> 

        </li> 

       </ul> 

       <ul class="nav navbar-nav navbar-right" > 

        <li><a href="faq.html" >FAQ</a></li> 
        <li><a href="contact.html" >Contact Us</a></li> 

       </ul> 

      </div> 

     </div> 

    </div> 


    <div class="container" > 

     <div class="page-header" id="banner" > 

      <div class="row" > 

       <div class="col-lg-8 col-md-7 col-sm-6" > 

        <!-- page title --> 
        <h1>Frequently Asked Questions</h1> 

        <!-- page content --> 
        <ul> 
         <li><a href="#a" >Does this site promise that I will...?</a></li> 
         <li><a href="#b" >Should I subscribe to this service if...?</a></li> 
         <li><a href="#c" >How long will it be before I hear from...?</a></li> 
        </ul> 

        <p>In choosing Answers . . . </p> 

        <a href="#" >Return to Top</a> 

        <h3><a name="a" >Does this site promise that I will...?</a></h3> 

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue iaculis scelerisque. Maecenas tellus eros, laoreet sed libero in, placerat ultricies nisi. Nullam non nunc sapien. Quisque vestibulum arcu quis sem pellentesque vehicula. Praesent at tortor at justo ultrices tempus. Nam volutpat feugiat sapien. Aenean rutrum ullamcorper augue, et faucibus enim hendrerit in.</p> 

        <p>Donec fermentum orci id nisl imperdiet pulvinar. Sed dolor lacus, pretium vitae magna sed, laoreet rhoncus ipsum. Ut fringilla ullamcorper lectus at mollis. In lobortis ac sem ut hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum aliquet urna ac sapien blandit ullamcorper. Integer gravida, risus a dictum pulvinar, eros ante pharetra purus, quis porta enim massa in nisl. Sed fringilla mauris sit amet nibh dapibus, vitae aliquam elit tempor. Vestibulum vitae diam ante. Cras hendrerit porta diam eget dapibus. Nam aliquet dolor in justo feugiat luctus. Nunc sit amet condimentum nibh. Pellentesque dignissim orci eros, euismod mollis turpis tempor et. In hac habitasse platea dictumst. Nullam pretium fringilla urna ac rhoncus. Vivamus odio dolor, sodales a euismod in, consequat tempor tellus.</p> 

        <a href="#" >Return to Top</a> 

        <h3><a name="b" >Should I subscribe to this service if...?</a></h3> 

        <p>Nullam non elementum ipsum. Aliquam imperdiet tortor eros, nec finibus erat viverra in. Nulla turpis dolor, sagittis quis mi nec, ornare viverra nisi. Mauris quis aliquet metus. Vestibulum pulvinar orci eget cursus aliquet. Integer laoreet arcu velit. Nullam ultrices ligula libero, a auctor dolor feugiat a. Vestibulum dolor lectus, mollis et sapien quis, porta dictum libero. Sed in ante justo. Cras ultricies tempor faucibus. Aliquam consequat et magna non finibus.</p> 

        <p>Phasellus pulvinar urna vitae volutpat congue. Vivamus non aliquam nulla. Nam nulla enim, fringilla ac condimentum quis, ullamcorper tincidunt turpis. Vestibulum tristique, lacus vitae placerat posuere, sapien neque sollicitudin quam, et ullamcorper libero nisl at ipsum. Sed eleifend risus leo, et sollicitudin erat faucibus et. Vivamus tellus diam, mattis sit amet porta at, fermentum et lacus. Sed pellentesque neque sem, cursus faucibus elit fringilla ac. Nulla turpis eros, cursus ut tincidunt sit amet, vehicula bibendum dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer felis sem, sagittis ut eleifend vel, semper quis lacus. Curabitur quis tortor congue, gravida urna sit amet, commodo quam. Nullam id neque lorem. Proin porta aliquam urna, vel auctor neque eleifend vitae. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 

        <a href="#" >Return to Top</a> 

        <h3><a name="c" >How long will it be before I hear from...?</a></h3> 

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue iaculis scelerisque. Maecenas tellus eros, laoreet sed libero in, placerat ultricies nisi. Nullam non nunc sapien. Quisque vestibulum arcu quis sem pellentesque vehicula. Praesent at tortor at justo ultrices tempus. Nam volutpat feugiat sapien. Aenean rutrum ullamcorper augue, et faucibus enim hendrerit in.</p> 

        <p>Donec fermentum orci id nisl imperdiet pulvinar. Sed dolor lacus, pretium vitae magna sed, laoreet rhoncus ipsum. Ut fringilla ullamcorper lectus at mollis. In lobortis ac sem ut hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum aliquet urna ac sapien blandit ullamcorper. Integer gravida, risus a dictum pulvinar, eros ante pharetra purus, quis porta enim massa in nisl. Sed fringilla mauris sit amet nibh dapibus, vitae aliquam elit tempor. Vestibulum vitae diam ante. Cras hendrerit porta diam eget dapibus. Nam aliquet dolor in justo feugiat luctus. Nunc sit amet condimentum nibh. Pellentesque dignissim orci eros, euismod mollis turpis tempor et. In hac habitasse platea dictumst. Nullam pretium fringilla urna ac rhoncus. Vivamus odio dolor, sodales a euismod in, consequat tempor tellus. 
         <ul> 
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 
          <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> 

         </ul> 
        </p> 
        <!-- // page content --> 

       </div> 

       <div class="col-lg-4 col-md-5 col-sm-6" > 

        <div class="sponsor" > 

         <!-- ads or sub-nav --> 

         <!-- // ads or sub-nav --> 

        </div> 

       </div> 

      </div> 

     </div> 

     <footer> 

      <div class="row" > 

       <div class="col-lg-12" > 

        <ul class="list-unstyled" > 
         <li class="pull-right" ><a href="#top" >Back to top</a></li> 
         <li></li> 
        </ul> 

       </div> 

      </div> 

     </footer> 

    </div> 

Answer 1

歐陽海因公司在repated後回答精美的作品 - 沒有JS。

HTML position:fixed page header and in-page anchors