jQueryのScrollTopに関する問題（主にChrome版）

Question

私はウェブサイトでscrollTopを使用する際に問題が発生しています。私はいくつかのテストコードを作りましたが、Firefoxで動作させることはできましたが、それでもChromeで動作することを拒否しています...コードに何が間違っているかは本当に分かりません。私はoffsetの値を表示するためにconsole.log（）を追加しましたが、これはうまくいきますが、Chromeブラウザはid = "search"でdivにスクロールしません。誰かが私が間違っている何かを見ることができますか？

<a href="#" id="test-btn" class="darhoudou-button">Test</a> 

<div class="test-box">test1</div> 
<div class="test-box">test2</div> 
<div class="test-box">test3</div> 
<div class="test-box">test4</div> 
<div class="test-box" id="search">test5</div> 
<div class="test-box">test6</div> 

<script> 
    $(document).ready(function(){ 

     $('#test-btn').on('click', function(){ 

      $('html, body').animate({ 
       scrollTop: $('#search').offset().top 
      }, 200); 

     }); 

     console.log($('#search').offset().top);   
    }); 
</script> 

Answer 1

私はあなたのコードをテストし、それは問題ありません。

ブラウザの高さが500pxおよび600pxの場合、100pxのスクロールしかできません。ページの高さが500ピクセル未満の場合、スクロールはありません。

<div class="test-box" style="height:1000px;">test6</div> 

をし、その結果を参照してください、それとも、クロムと、このスニペットをテストすることができます：

はこれにこの <div class="test-box">test6</div>を変更してください

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 

 
<a href="#" id="test-btn" class="darhoudou-button">Test</a> 
 

 
<div class="test-box">test1</div> 
 
<div class="test-box">test2</div> 
 
<div class="test-box">test3</div> 
 
<div class="test-box">test4</div> 
 
<div class="test-box" id="search">test5</div> 
 
<div class="test-box" style="height:1000px;">test6</div> 
 

 
<script> 
 
    $(document).ready(function(){ 
 

 
     $('#test-btn').on('click', function(){ 
 

 
      $('html, body').animate({ 
 
       scrollTop: $('#search').offset().top 
 
      }, 200); 
 

 
     }); 
 

 
     console.log($('#search').offset().top);   
 
    }); 
 
</script>

Answer 2

解決しよう

それは問題を引き起こした私のCSSファイルだったことが判明しました。他の誰かが同様の問題を経験した場合は、jsファイルとcssファイルを1つずつコメントアウトして修正するかどうかを確認することをおすすめします。それは私のCSSで

問題は以下の通りであった...あなたは、問題の原因となっているファイルの特定に役立つかもしれない：

html { 
    overflow: hidden; 
    height: 100%; 
}  


body { 
    overflow: auto; 
    height: 100%; 
}