jQuery плавная прокрутка якорной навигации

Question

У меня есть перечни, основанные на навигации в верхней части моего сайта, это сайт на одной странице, так что hrefs являются привязками к разделам на странице. Я использовал этот код: jQuery smooth scroll positioning doesn't work

Навигация:

<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 id="contact"> <!----> 
    <div class="panel" id="contact"> 
     <h2>Contact</h2> 
    </div> 
</section> <!----> 

Javascript используется:

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

Анкер работает и прыгает на раздел, но без прокрутки?

Answer 1

Есть несколько проблем в вашем коде:

• Вы не закрыли li s правильно
• Вы же id s для section и div, что является недопустимым

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

Так что исправление выше ошибки, которые я хотел бы добавить еще одно изменение в вашей JS, которая:

• Нет необходимости добавлять parseInt к scrollTop. Вы можете непосредственно перейти с 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; 
     }); 
    }); 
}); 

Answer 2

Попробуйте этот код:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 

     var target = this.hash; 
     var $target = $(target); 
     var scroll; 

     if($(window).scrollTop()==0){ 
      scroll = ($target.offset().top) - 160 
     }else{ 
      scroll = ($target.offset().top) - 60 
     } 
     $('html, body').stop().animate({ 
      'scrollTop': scroll 
     }, 900, 'swing', function() { 
      //window.location.hash = target; 
     }); 
    }); 
}); 
</script>