jQuery smooth scrolling anchor navigation -

i have list based navigation @ top of site, it's 1 page site hrefs anchors sections on page. i've used code: jquery smooth scroll positioning doesn't work

navigation:

<nav>    <ul class="navigation">       <li class="navigation"><a class="scroll" href="#about-me">about me</a>       </li>       <li class="navigation"><a class="scroll" href="#my-skills" >my skills</a>       </li>       <li class="navigation"><a class="scroll" href="#portfolio">portfolio</a>       </li>       <li class="navigation"><a class="scroll" href="#contact">contact</a>       </li>        </ul> </nav> 

section/div:

<section id="contact"> <!---->     <div class="panel" id="contact">         <h2>contact</h2>     </div> </section> <!----> 

javascript used:

<script type="text/javascript"> $(document).ready(function(){     $('a[href^="#"]').on('click',function (e) {         e.preventdefault();          var target = this.hash;         $target = $(target);          $('html, body').stop().animate({             'scrolltop':  parseint($target.offset().top,10);         }, 900, 'swing', function () {             window.location.hash = target;         });     }); }); </script> 

the anchor works , jumps section, no scrolling?

there few problems in code:

• you haven't closed lis properly
• you have same ids section , div invalid

<section id="contact"> <!---->     <div class="panel" id="contact"> 

so correcting above mistakes add 1 more change in js is:

• no need add parseint scrolltop. can directly go offset().top

demo

$(document).ready(function(){     $('a[href^="#"]').on('click',function (e) {         e.preventdefault();         var target = this.hash;         $target = $(target);         $('html, body').stop().animate({             'scrolltop':  $target.offset().top //no need of parseint here         }, 900, 'swing', function () {             window.location.hash = target;         });     }); });