スムーズスクロールのli要素の

Question

私はすぐにそこに行くと、できるだけシンプルにする代わりにページにスクロールするjQueryコードを書き込もうとしています。私はli要素に必要なdivのIDを追加しました。

私のhtmlコードは次のようになります。

<li id="#slide1" class="active" onclick="javascript:location.href='#slide1'"><a href="#slide1" title="Next Section" >About</a></li> 
    <li id="#slide2" onclick="javascript:location.href='#slide3'"><a href="#slide2" title="Next Section">Works</a></li> 
    <li id="#slide3" onclick="javascript:location.href='#slide3'"><a href="#slide3" title="Next Section">Contact</a></li> 
    <li id="#slide4" onclick="javascript:location.href='#slide4'"><a href="#slide4" title="Next Section">belekas</a></li> 
    <li id="#slide5" onclick="javascript:location.href='#slide5'"><a href="#slide3" title="Next Section">dar vienas</a></li> 

と私はこのjQueryのコードを試みたが、それは動作しません。だから誰でも私を助けることができますか？

$('li').click(function(){ 
    var target = $(this).attr('id'); 
    $("html, body").animate({ 
    scrollTop: target.offset().top 
     }, 1000); 
    return false; 
}); 

UPDATE：https://jsfiddle.net/j452hL2w/ここだ、私はすべてのリスト項目からすべてのonclick="javascript:location.href='#slide'"を取り出し、私のナビゲーション

Answer 1

のフィドルバージョンです。 clickhandlerをj​​avascriptで作成するため、これは必要ではありません。

私はこれであなたのクリック機能を置き換える：ここ

$('li').click(function(e) { 
    // Prevent default action (e.g. jumping to top of page) 
    e.preventDefault(); 
    // Create a variable with the link found in the list-item 
    var link = $(this).children('a');  
    // Animate the document 
    $('html,body').animate({ 
    // Gets the href from the link ('slideX') and scrolls to it on the page. 
    scrollTop: $(link.attr('href')).offset().top 
    // 'slow'(600ms) can be replaced by 'fast'(200ms) or a number in ms. 
    // The default is 400ms 
    }, 'slow'); 
}); 

はupdated fiddleです。