jQuery Smooth Scroll не прокрутка

Question

Я пытаюсь добавить гладкую прокрутку к названным якорям на моем сайте. У меня есть подключаемый модуль jQuery, который просто вызывает внутренние имена якорей и анимирует html и body. Я использовал его раньше на других сайтах, и он отлично работает, но я не могу понять, почему он здесь не работает. Как ни странно, тот же код отлично работает в Apple Safari, но не в Google Chrome. Все остальные сайты, которые я использовал, отлично работают в Chrome. Я не могу понять это.

Ниже приведен мой HTML. Это просто div с тегом и совпадающей точкой привязки в div ниже.

<div id="slide1" class="slide"> 
<a href="#section"> 
<div id="scrollbtn"> 
<img src="images/downarrow.png" alt="Down Arrow"> 
</div> 
</a> 
</div> 


<div id="main"> 
<a id="section" class="link"></a> 
<p>Test</p> 
</div> 

Ниже приведен JQuery плагин. Он отлично работал на других сайтах, которые я использовал, и я не понимаю, почему он здесь не работает.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 
$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 500); 
     return false; 
     } 
    } 
    }); 
}); 
</script> 

Любая помощь будет оценена.

Answer 1

$(function() { 
    $('a').bind('click',function(event){ 
     var $anchor = $(this); 

     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 800); 
     event.preventDefault(); 
    }); 
}); 

Это еще один способ сделать это.

Codepen

Оставьте вам Codepen работает. Дайте мне знать, что дает вам проблемы.