2017-07-07 8 views
2

私がしたいことは、「ホーム」がナビゲーションバーでクリックされたときに、ページの上にスクロールする必要がありますが、何も動作していないようです。同じ.htmlで動作するようにして、同じページで使用しています。Navbar link上にスクロール

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container text-center"> 
     <div id="navbar" class="navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#home">Home</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> 
    </div> 
</nav> 

<script> 
    $("#home").on("click", function() { 
     $("body").scrollTop(0); 
    }); 
</script> 
+0

これを行うにはjQueryは必要ありません。あなたのURLに#homeとbody IDを "home"と書いて、それがそのidを指し示し、bodyであるのでそれは上にスクロールします。あなたが何らかの理由でそれを使用したくない場合を除き、jqueryの必要はありません。 – user5014677

答えて

1

ここではこのコードを使用できます。

idではないため、#homeをjQueryで直接使用することはできません。

ですから、この例ではあなたを助けます。この$("a[href='#home']").on("click", function() {

希望のようにそれを使用する必要があります。

$("a[href='#home']").on("click", function() { 
 
    $('body').animate({ 
 
      scrollTop: 0 
 
    }, 
 
    500); //this will helps you to smooth scroll to top 
 
});
body { 
 
height: 500px; 
 
} 
 
nav { 
 
position: fixed; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container text-center"> 
 
      <div id="navbar" class="navbar-collapse"> 
 
       <ul class="nav navbar-nav"> 
 
        <li><a href="#home">Home</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> 
 
     </div> 
 
    </nav>

0

はいこのコードは、残念ながら動作してみません:

$("a[href='#home']").click(function(){ 
    $('html, body').animate({scrollTop : 0},800); 
    return false; 
}); 

お祈り申し上げます

0

私はbodyバーをスクロールしていると思ういけません。 divにスクロールバーが含まれている必要があります。スクロールバーとInspecを右クリックするだけで

関連する問題