title: Smooth scrolling onclick of li element
body: <p>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. </p>
  
  <p>My html code looks like this:</p>
  
  <pre><code>&lt;li id="#slide1" class="active" onclick="javascript:location.href='#slide1'"&gt;&lt;a href="#slide1" title="Next Section" &gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;li id="#slide2" onclick="javascript:location.href='#slide3'"&gt;&lt;a href="#slide2" title="Next Section"&gt;Works&lt;/a&gt;&lt;/li&gt;
      &lt;li id="#slide3" onclick="javascript:location.href='#slide3'"&gt;&lt;a href="#slide3" title="Next Section"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;li id="#slide4" onclick="javascript:location.href='#slide4'"&gt;&lt;a href="#slide4" title="Next Section"&gt;belekas&lt;/a&gt;&lt;/li&gt;
      &lt;li id="#slide5" onclick="javascript:location.href='#slide5'"&gt;&lt;a href="#slide3" title="Next Section"&gt;dar vienas&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>and I tried this jQuery code but it doesn't work. So maybe anyone could help me?</p>
  
  <pre><code>$('li').click(function(){
      var target = $(this).attr('id'); 
      $("html, body").animate({
       scrollTop: target.offset().top
          }, 1000);
      return false;  
   });
  </code></pre>
  
  <p><strong>UPDATE:</strong> <a href="https://jsfiddle.net/j452hL2w/" rel="nofollow">https://jsfiddle.net/j452hL2w/</a> here's is fiddle version of my navigation</p>