Javascriptで動作しない1ページスクロールナビ？

Question

私は基本的なJavaScriptを使って簡単な1ページスクロールナビゲーションを作成しようとしていますが、機能を使用してセクションにスクロールすると、1秒間アニメーションされます。 問題は機能していないということです。アイデアは誰ですか？

Htmlの

  <ul class="header-nav"> 
      <li><a id="home" href="#home-View">Home</a></li> 
      <li><a id="about" href="#about-View">About</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a id="contact" href="#contact-View">Contact</a></li> 
     </ul> 

Javascriptが

$(document).ready(function() { 

    // add a click listener to each <a> tags 
    setBindings(); 

}); 

function setBindings() { 
    $(".header-nav a").click(function(e) { 
     // prevent anchor tags for working (?) 
     e.preventDefault(); 
     var sectionID = e.currentTarget.id + "Section"; 

     $("html body").animate({ 
      scrollTop: $("#" + sectionID).offset().top 
     }, 1000) 

     alert("sdf"); 
    }) 
} 

Answer 1

idは、マークアップでは見つかりませんでしたし、それが働いて、エラーを慰めていなかった理由は、以下のようにしてみてくださいだ

$(document).ready(function() { 
 

 
    // add a click listener to each <a> tags 
 
    setBindings(); 
 

 
    }); 
 

 
    function setBindings() { 
 
    $(".header-nav a").click(function(e) { 
 
     // prevent anchor tags for working (?) 
 
     e.preventDefault(); 
 
     var sectionID = e.currentTarget.id + "-View"; 
 
     console.log(sectionID); 
 
     $("html,body").animate({ 
 
     scrollTop: $("#" + sectionID).offset().top 
 
     },1000); 
 
     alert("sdf"); 
 
    }) 
 
    }

body { 
 
    height: 1200px; 
 
} 
 

 
#home-View { 
 
    margin-top: 50px; 
 
    background: red; 
 
    height: 200px; 
 
} 
 

 
#about-View { 
 
    margin-top: 50px; 
 
    background: red; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="header-nav"> 
 
    <li><a id="home" href="#home-View">Home</a></li> 
 
    <li><a id="about" href="#about-View">About</a></li> 
 
    <li><a href="#">Blog</a></li> 
 
    <li><a id="contact" href="#contact-View">Contact</a></li> 
 
</ul> 
 
<div id="home-View"></div> 
 
<div id="about-View"></div>

Answer 2

は、要素に移動するには、この実施例を試してみてください。あなたはjQueryコードに応じて選択された

$(document).ready(function() { 
 

 
    // add a click listener to each <a> tags 
 
    setBindings(); 
 

 
}); 
 

 
function setBindings() { 
 
    $(".header-nav a").click(function(e) { 
 
     
 
     // prevent anchor tags for working (?) 
 
     e.preventDefault(); 
 
     var sectionID = e.currentTarget.id + "Section"; 
 
     console.log(sectionID); 
 
     $("html body").animate({ 
 
      scrollTop: $("#" + sectionID).offset().top 
 
     }, 1000) 
 

 
     alert("sdf"); 
 
    }) 
 
}

#homeSection 
 
{ 
 
    height:200px; 
 
    background-color:red; 
 
    border:1px solid #DDD; 
 
} 
 

 
#aboutSection 
 
{ 
 
    height:200px; 
 
    background-color:white; 
 
    border:1px solid #DDD; 
 
} 
 

 
#blogSection 
 
{ 
 
    height:200px; 
 
    background-color:blue; 
 
    border:1px solid #DDD; 
 
} 
 

 
#contactSection 
 
{ 
 
    height:200px; 
 
    background-color:#DDD; 
 
    border:1px solid #DDD; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="header-nav"> 
 
      <li><a id="home" href="#home-View">Home</a></li> 
 
      <li><a id="about" href="#about-View">About</a></li> 
 
      <li><a id="blog" href="#">Blog</a></li> 
 
      <li><a id="contact" href="#contact-View">Contact</a></li> 
 
     </ul> 
 
     
 
    
 
<div id="homeSection"></div> 
 
<div id="aboutSection"></div> 
 
<div id="blogSection"></div> 
 
<div id="contactSection"></div>