平滑滚动li元素的onclick

Question

I'm trying to write jQuery code which would make the page scroll to the div instead of going there immediately and to make it as simple as possible. I have added ids of desired divs to li elements.

My html code looks like this:

<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>

and I tried this jQuery code but it doesn't work. So maybe anyone could help me?

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

UPDATE: https://jsfiddle.net/j452hL2w/ here's is fiddle version of my navigation

Answer 1

I removed every onclick="javascript:location.href='#slide'" from every list item. This is not necessary because you create the clickhandlers in javascript.

I replaced your click function with this:

$('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');
});

Here is the updated fiddle .