セクションへのナビゲーション「scrollTo」を作成するにはどうすればよいですか？

Question

私は現在、ナビゲーションタブが1ページのサイトの指定されたセクションにスクロールしない理由を理解するのに苦労しています。最初は、問題が単純な構文エラーの結果であった可能性があると思っていましたが、私の見解では完全にうまくいっています。以下は私のindex.htmlのコードの最小限のコピーを含んでいます。問題のあるものが何であるかを知ることができるものがあれば、本当に感謝します。&解決策前もって感謝します。あなたはid="works-section"が欠落している

<!-- Navigation --> 
 
<header class="header scrolling-header"> 
 
    <nav id="nav" class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container clearfix"> 
 
     <a class="toggle-button visible-xs-block" data-toggle="collapse" data-target="#navbar-collapse"> 
 
     <i class="fa fa-navicon"></i> 
 
     </a> 
 
     <a class="navbar-brand scroll" href="index.html"> 
 
     <img class="normal-logo " src="img/logo.png" alt="logo" /> 
 
     <img class="scroll-logo hidden-xs" src="img/logo-dark.png" alt="logo" /> 
 
     </a> 
 
     <div class="right-nav-block pull-right clearfix"> 
 
     <div class="navbar-collapse collapse floated" id="navbar-collapse"> 
 
      <ul class="main-menu nav navbar-nav clearfix navbar-with-inside vcenter"> 
 

 
      <li class=""><a href="#services-section" class="scrollTo">Services</a> 
 
      </li> 
 
      <li class=""><a href="#works-section" class="scrollTo">Work</a> 
 
      </li> 
 
      <li class=""><a href="#about-section" class="scrollTo">About</a> 
 
      </li> 
 
      <li class=""><a href="#about-section" class="scrollTo">Quote</a> 
 
      </li> 
 

 
      <li class=""> 
 
       <a href="#">Contact</a> 
 
       <div class="wrap-inside-nav"> 
 
       <div class="inside-col"> 
 
        <ul class="inside-nav"> 
 
        <li><a href="contact.html">Contact 1</a> 
 
        </li> 
 
        <li><a href="contact-2.html">Contact 2</a> 
 
        </li> 
 
        <li><a href="contact-3.html">Contact 3</a> 
 
        </li> 
 
        </ul> 
 
       </div> 
 
       </div> 
 
      </li> 
 
      <li class=""><a href="#"><i class="fa fa-twitter"></i></a> 
 
      </li> 
 

 
      <li class=""><a href="#"><i class="fa fa-facebook"></i></a> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav hidden-xs clearfix vcenter"> 
 
      <li> 
 
       <a href="#" class="toggle-menu-button"> 
 
       <div class="toggle-menu-button-icon"> 
 

 
       </div> 
 
       </a> 
 
      </li> 
 
      <li class="no-hover"><a href="#">call us 1.800.12345</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </nav> 
 
    <div class="wrap-fixed-menu" id="fixedMenu"> 
 
    <div class="top-items"> 
 
     <a href="blog.html" class="top-menu-item menu-item"> 
 
     <span class="subtitle">All The Latest</span> 
 
     <span class="title">Blog</span> 
 
     </a> 
 
     <a href="portfolio.html" class="top-menu-item menu-item"> 
 
     <span class="subtitle">Awesome</span> 
 
     <span class="title">Portfolio</span> 
 
     </a> 
 
    </div> 
 
    <div class="bottom-items"> 
 
     <a href="contact.html" class="bottom-menu-item menu-item"> 
 
     <span class="subtitle">We Are Designers</span> 
 
     <span class="title">Contacts</span> 
 
     </a> 
 
     <div class="bottom-menu-item menu-item contact-info"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <i class="fa fa-home"></i> 
 
      <label>ADDRESS</label> 
 
      <p class="vcenter">746 Roberts Road Findlay, OH 45840</p> 
 
      </div> 
 
      <div class="col-md-12"> 
 
      <i class="fa fa-phone"></i> 
 
      <label>PHONE</label> 
 
      <p class="vcenter">+201 126 216 88</p> 
 
      </div> 
 
      <div class="col-md-12"> 
 
      <i class="fa fa-envelope"></i> 
 
      <label>EMAIL</label> 
 
      <p class="vcenter">support@CreativeBrick.com</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header> 
 
<!--./navigation --> 
 

 

 
<!-- Slider header --> 
 

 
<section class="section-header-slider"> 
 

 
</section> 
 

 

 
<!-- Section intro --> 
 

 
<section class="section-intro blue-dark "> 
 
    <div class="container dark-content"> 
 
    <div class="row"> 
 
     <div class="col-md-3 hidden-sm hidden-xs"> 
 

 
     </div> 
 
     <div class="col-md-3 scrollme animateme" data-when="enter" data-from="0.5" data-to="0" data-crop="false" data-scale="1.5" data-opacity="0"> 
 
     <div class="arrow hidden-sm hidden-xs"> 
 
      <img src="img/arrow.png" alt="" /> 
 
     </div> 
 
     <div class="intro-title">Intro</div> 
 
     </div> 
 
     <div class="col-md-5 col-sm-12"> 
 
     <div class="intro-text"> 
 

 
     </div> 
 
     <div class="under-intro-text"> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 

 
<!-- Section intro 2 --> 
 

 
<section class="section-intro-2 "> 
 
    <div class="container"> 
 
    <div class="row"> 
 

 
    </div> 
 
    </div> 
 
</section> 
 

 

 

 

 

 

 

 

 

 

 

 

 
<!-- ========================== --> 
 
<!-- Section Services --> 
 
<!-- ========================== --> 
 
<section class="section-services"> 
 
    <div class="container"> 
 
    <div class="section-heading"> 
 
     <div class="section-subtitle">creating awesomeness</div> 
 
     <div class="section-title">services we provide</div> 
 
     <div class="sep-element"></div> 
 
    </div> 
 
    </div> 
 
    <div class="wrap-services-tabs"> 
 
    <div class="wrap-tabs"> 
 
    </div> 
 
    <div class="wrap-tabs-content top-arrow-effect"> 
 

 
     <div class="container"> 
 
     <!-- Tab panes --> 
 
     <div class="tab-content"> 
 
      <div class="tab-pane" id="support"> 
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1 col-sm-12"> 
 
       <div class="row"> 
 
        <div class="col-md-12"> 
 
        <h5 class="bold text-uppercase blue">Analytics details</h5> 
 
        <p> 
 
         TEXT HERE 
 
        </p> 
 
        <ul class="list list-round-check orange-list"> 
 

 
        </ul> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="tab-pane active" id="responsive"> 
 
      <div class="row"> 
 
       <div class="col-md-12 col-sm-12"> 
 
       <div class="row"> 
 
        <div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="-400"> 
 
        <img src="img/sections/tab-image-1.png" alt="" /> 
 
        </div> 
 
        <div class="col-md-6 animateme scrollme" data-when="enter" data-from="0.75" data-to="0" data-opacity="0" data-translatex="400"> 
 
        <h5 class="bold text-uppercase blue">Analytics details</h5> 
 
        <p> 
 
         TEXT HERE 
 
        </p> 
 

 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="tab-pane" id="analytics"> 
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1 col-sm-12"> 
 
       <div class="row"> 
 
        <div class="col-md-6"> 
 
        <h5 class="bold text-uppercase blue">Analytics details</h5> 
 
        <p> 
 
         TEXT HERE 
 
        </p> 
 
        <ul class="list list-round-check orange-list"> 
 

 
        </ul> 
 
        <div class="designations clearfix"> 
 
         <div class="last-year"><span></span>last year</div> 
 
         <div class="this-year"><span></span>this year</div> 
 
        </div> 
 
        </div> 
 
        <div class="col-md-6"> 
 
        <div class="graph-line" id="graph-line3"></div> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="tab-pane" id="customizable"> 
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1 col-sm-12"> 
 
       <div class="row"> 
 
        <div class="col-md-12"> 
 
        <h5 class="bold text-uppercase blue">Analytics details</h5> 
 
        <p> 
 
         TEXT HERE 
 
        </p> 
 
        <ul class="list list-round-check orange-list"> 
 

 
        </ul> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <div class="tab-pane" id="multipurpose"> 
 
      <div class="row"> 
 
       <div class="col-md-10 col-md-offset-1 col-sm-12"> 
 
       <div class="row"> 
 
        <div class="col-md-12"> 
 
        <h5 class="bold text-uppercase blue">Analytics details</h5> 
 
        <p> 
 
         TEXT HERE 
 
        </p> 
 
        <ul class="list list-round-check orange-list"> 
 

 
        </ul> 
 
        </div> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 

 

 
<section class="section-purchase orange-dark"> 
 
    <div class="container dark-content"> 
 
    <div class="row"> 
 
     <div class="col-md-2 col-sm-3 text-right logo-block"> 
 
     <img src="img/logo.png" alt="" /> 
 
     <div>Creative Agency</div> 
 
     </div> 
 
     <div class="col-md-offset-1 col-md-6 col-sm-6"> 
 
     <h3 class="bold">Drop us a line if you’d like to work with us</h3> 
 
     <p>We’re always looking for new talent so join our team now</p> 
 
     </div> 
 
     <div class="col-md-2 col-sm-3 text-right"> 
 
     <a href="#" class="btn btn-default btn-transparent text-white">get in touch</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 

 
<section class="section-skills"> 
 
    <div class="feature-section dark dark-strong"> 
 
    <div class="container dark-content"> 
 
     <div class="row"> 
 
     <div class="col-md-4"> 
 
      <div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300"> 
 
      <h5><span>01</span>Generate Ideas</h5> 
 
      <p> 
 
       TEXT HERE 
 
      </p> 
 
      </div> 
 
      <div class="feature-item feature-divider text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300"> 
 
      <div class="feature-divider-item"></div> 
 
      </div> 
 
      <div class="feature-item text-right animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="-300"> 
 
      <h5><span>04</span>Launch & Deliver</h5> 
 
      <p> 
 
       TEXT HERE 
 
      </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="wrap-feature-content"> 
 
      <img src="img/feature-background.png" alt="" /> 
 
      <div class="feature-content"> 
 
       <img src="img/logo-free.png" alt="" /> 
 
       <div class="feature-text"> 
 
       THE PROCESS 
 
       <span>We Follow</span> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300"> 
 
      <h5>Preparing Briefs<span>02</span></h5> 
 
      <p> 
 
       TEXT HERE 
 
      </p> 
 
      </div> 
 
      <div class="feature-item right-feature-item feature-divider animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300"> 
 
      <div class="feature-divider-item"></div> 
 
      </div> 
 
      <div class="feature-item right-feature-item animateme scrollme" data-when="enter" data-from="0.95" data-to="0" data-opacity="0" data-translatex="300"> 
 
      <h5>Project Development<span>03</span></h5> 
 
      <p> 
 
       TEXT HERE 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 

 

 

 

 

 

 

 
<!-- ========================== --> 
 
<!-- Section trust --> 
 
<!-- ========================== --> 
 
<section class="section-trust-us clearfix"> 
 
    <div class="trus-image"> 
 
    <img src="img/sections/section-trust-us-image.png" alt="" /> 
 
    </div> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-offset-6 col-md-6"> 
 
     <div class="section-heading"> 
 
      <div class="section-title">why trust us</div> 
 
      <div class="section-subtitle">creating awesomeness</div> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-offset-6 col-md-6" data-wow-duration="2s"> 
 
     <div id="accordion-one" role="tablist" aria-multiselectable="true"> 
 
      <div class="panel panel-default panel-alt-two"> 
 

 
      <div class="panel-heading active" role="tab" id="headingOne"> 
 
       <h5 class="panel-title"> 
 
             <a data-toggle="collapse" data-parent="#accordion-one" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
              <span class="accordion-icon"> 
 
               <span class="stacked-icon"> 
 
                <i class="icon-bulb"></i> 
 
               </span> 
 
              </span> 
 
              TEXT HERE 
 
             </a> 
 
            </h5> 
 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
       <div class="panel-body"> 
 
       <p> 
 
        TEXT HERE 
 
       </p> 
 
       </div> 
 
      </div> 
 

 
      <div class="panel-heading" role="tab" id="headingTwo"> 
 
       <h5 class="panel-title"> 
 
             <a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
              <span class="accordion-icon"> 
 
               <span class="stacked-icon"> 
 
                <i class="icon-rocket"></i> 
 
               </span> 
 
              </span> 
 
              <b>TEXT HERE</b> 
 
             </a> 
 
            </h5> 
 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
       <div class="panel-body"> 
 
       <p> 
 
        TEXT HERE 
 
       </p> 
 
       </div> 
 
      </div> 
 

 
      <div class="panel-heading" role="tab" id="headingThree"> 
 
       <h5 class="panel-title"> 
 
             <a class="collapsed" data-toggle="collapse" data-parent="#accordion-one" href="#collapseThree" aria-expanded="false" aria-controls="collapseTwo"> 
 
              <b>TEXT HERE</b> 
 
              <span class="accordion-icon"> 
 
               <span class="stacked-icon"> 
 
                <i class="icon-badge"></i> 
 
               </span> 
 
              </span> 
 
             </a> 
 
            </h5> 
 
      </div> 
 
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
       <div class="panel-body"> 
 
       <p> 
 
        TEXT HERE 
 
       </p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
      <!--panel--> 
 
     </div> 
 
     <!--accordion--> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

など

それはあなたがページアンカーを持っている働き方後のマークアップで続い

<a href="#someID">Some Title</a>
のような、ジャンプするリンクを希望する場合は、対応するIDを入力します。
<section id="someID">…</section>。

意味がありますか？