2017-07-07 5 views
0

ここに私が持っているものがあります。
クリック機能が動作し、セクションのその部分にジャンプしますが、スクロールしているアニメーションが機能していません。jQuery scrolltopアニメーションアニメ化しない

私は間違っていましたか?

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
     <div class="container text-right"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

      </div> 

<div class="collapse navbar-collapse text-left" id="navbar-collapse" > 
    <ul class="nav navbar-nav"> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#skills">Skills</a></li> 
    <li><a href="#feedback">Feedback</a></li> 
    <li><a href="#about">About me</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
</div> 

<script> 
    $("#navbar").on("click", function(e) { 
    e.preventDefault(); 
    var section = $(this).attr("href"); 
    $("html, body").animate({ 
     scrollTop: $(section).offset().top 
    }, 1500); 
    });  
</script> 

答えて

1

は、ページ上のどの要素#navbarありませんので、クリックイベントが解雇れることは決してありません、とブラウザだけで(アンカーにジャンプ)いつものように振る舞う - #navbar-collapse、または.nav aのようなものを使用してみてください。

0

変更し、このようなものにjQueryの:

$(".navbar-nav a").on("click", function(e) { 
    e.preventDefault(); 
    var section = $(this).attr("href"); 
    $("html, body").animate({ 
     scrollTop: $(section).offset().top 
    }, 1500); 
    }); 

あなたの選択が間違っています。あなたはidがnavbarの要素がありません。これは、イベントリスナーが起動していないことを意味します。それがアニメートしない理由です。

関連する問題