2017-04-23 9 views
0

ワークブックにスクロールするボタンがあるナビゲーションバーがあります。ナビゲーションバーで作業をクリックすると、即座に作業セクションに移動します。私はしばらくそれを把握しようとしてきましたが、私はかなりjqueryに新しいです。jquery button li a href滑らかな下から下へのスクロール

jqueryコードはどのように起こるのですか?

HTML

<div class="navbar navbar-transparent navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
    <!-- Button is for phones, toggles a drop down for navigation --> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="sr-only">Toggle naviggation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html">JEROME REYES</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="#work">Work</a></li> 
    </ul> 
    </div> 
</div> 

JS

$(document).ready(function(){ 
    $('a[href^="#"]').click(function(){ 
    $('html , body').animate({ 
     scrollTop:0 
    },'slow'); 
}) 
+0

固定、適切な形式で –

+0

ごめんタイプミスをjsのコードを追加してください! –

答えて

0
$(document).ready(function(){ 
    $('.navbar-nav li a').click(function(){ 
    $("html, body").animate({ 
     scrollTop: $($(this).attr('href')).offset().top - 0 
    }, 500); 
}); 
}); 
+0

は2行目の]を取り除かなければならず、それは魅力のように働きました。 –

+0

私が言及した後]、この括弧をコードに削除しました。ありがとう –

0
$('.nav-headers').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
      $('html, body').animate({ 
      scrollTop: target.offset().top 
      }, 1000); 
      return false; 
     } 
    } 
}); 
関連する問題