jQueryスムーズスクロールでスクロールしない

Question

私は自分のサイトの名前付きアンカーに円滑なスクロールを追加しようとしています。私は内部的に名前のついたアンカーを呼び出し、htmlとbodyをアニメーション化するjQueryプラグインを持っています。以前は他のサイトで使っていましたが、うまくいきましたが、ここではうまくいかない理由がわかりません。不思議にも、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(); 
    }); 
}); 

もう1つの方法です。

Codepen

あなたCodepenの作業を残します。何が問題になっているのか教えてください。