Javascriptスクロールが期待通りに機能しない

Question

ナビゲーションから別のセクションへのスムーズなスクロールを実装しようとしています。

<div class="module-group right"> 
    <div class="module left" id="nav"> 
      <ul class="menu"> 
       <li class=""> 
        <a href="#"> 
         Home 
         </a> 
       </li> 
       <li class=""> 
         <a id="about" href="#"> 
         About Us 
         </a> 
       </li> 
      </ul> 
     </div> 
    </div> 

私のセクションでは、以下の通りである：私は直面しています

<section id="about"> 
      <div class="container" id=""> 
       <div class="row" id=""> 
        <div class="col-sm-12"> 
         <h4 class="uppercase mb80">About Us</h4> 
         <div class="tabbed-content button-tabs vertical"> 
          <ul class="tabs"> 
           <li class="active"> 
            <div class="tab-title"> 
             <span>Introduction</span> 
            </div> 
            <div class="tab-content"> 
             <h5 class="uppercase">Let's Talk about</h5> 
             <hr> 
             <p align="justify"> 

             </p> 
            </div> 
           </li> 
           <li> 
            <div class="tab-title"> 
             <span>History</span> 
            </div> 
            <div class="tab-content"> 
             <h5 class="uppercase">Our footprints on the sands of time..</h5> 
             <hr> 
             <p align="justify"> 

             </p> 
            </div> 
           </li> 
           <li> 
            <div class="tab-title"> 
             <span>Mission</span> 
            </div> 
            <div class="tab-content"> 
             <h5 class="uppercase">Our Mission</h5> 
             <hr> 
             <p align="justify"> 

             </p> 
            </div> 
           </li> 
           <li> 
            <div class="tab-title"> 
             <span>Vision</span> 
            </div> 
            <div class="tab-content"> 
             <h5 class="uppercase">Our Vision</h5> 
             <hr> 
             <p align="justify"> 

             </p> 
            </div> 
           </li> 
          </ul> 
         </div> 
         <!--end of button tabs--> 
        </div> 
       </div> 
       <!--end of row--> 
      </div> 
      <!--end of container--> 
     </section> 

<script type="text/javascript"> 
     function goToByScroll(id){ 
     // Reove "link" from the ID 
       // Scroll 
      $('html,body').animate({ 
       scrollTop: $("#"+id).offset().top}, 
       'slow'); 
     } 

     $("#nav > ul > li > a").click(function(e) { 
       // Prevent a page reload when a link is pressed 
      e.preventDefault(); 
       // Call the scroll function 
      goToByScroll($(this).attr("id"));   
     }); 
    </script> 

私のHTMLは以下の通りである：

には、以下の を使用してJavaScript関数イムですjquery関数を呼び出す際の問題尋ねられた他の質問を見上げ、以前に答えを実装しようとしましたが、それは私のために働いているようです。

Answer 1

ナビリンクを<a href="about">About Us</a>に変更してください。

その後、あなたは同じIDを持つ2つの要素を持つことはできませんgoToByScroll($(this).attr("href"));

Answer 2

への関数呼び出しを変更します。意図したようにhrefを使用してください。

<a href="#about"> About Us </a> 

、あなたがクリックされたアンカーのhsahを読むとき

function goToByScroll(id){ 
     $('html,body').animate({ 
      scrollTop: $(id).offset().top}, 
      'slow'); 
    } 

    $("#nav > ul > li > a").click(function(e) { 
     e.preventDefault(); 
     goToByScroll(this.hash);   
    }); 

基本的な例：

function goToByScroll(id) { 
 
    $('html,body').animate({ 
 
     scrollTop: $(id).offset().top 
 
    }, 
 
    'slow'); 
 
} 
 

 
$("#nav > ul > li > a").click(function(e) { 
 
    e.preventDefault(); 
 
    goToByScroll(this.hash); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="nav"> 
 
    <ul> 
 
    <li><a href="#about"> About Us </a></li> 
 
    </ul> 
 
    </div> 
 
<div style="height:300px;">x</div> 
 
<div style="height:300px;">x</div> 
 
<div id="about" style="height:300px; border: 1px solid black;">ABOUT</div> 
 
<div style="height:300px;">x</div>

Answer 3

使用href必要にIDを格納するための属性にスクロールします。また、$(document).ready()にjavascriptをラップして、ページが準備完了した後にイベントハンドラが接続されていることを確認してください。動作していない何

<li class=""> 
    <a href="#about"> 
    About Us 
    </a> 
</li>