jQuery中的ScrollTop問題（主要在Chrome中）

所以我一直在使用scrollTop的網站問題。我做了一些測試代碼，並且設法讓它在Firefox中工作，但它仍然拒絕在Chrome中工作......我真的看不到代碼有什麼問題。我已經添加了一個console.log（）來顯示偏移量的值，並且工作正常，但Chrome瀏覽器不會滾動到id =「search」的div。任何人都可以看到我做錯了什麼嗎？jQuery中的ScrollTop問題（主要在Chrome中）

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

來源

2017-03-05 Chris_S

箱子是可以置於絕對？ – Psi

您的代碼在我的Chrome中正常工作：https：//jsfiddle.net/mpa29552/。檢查控制檯是否存在代碼其他部分的錯誤 –

如上所述，此代碼確實工作正常：https://jsfiddle.net/jqfps5c4/ – BenM

我測試你的代碼，它有沒有問題。

如果您的瀏覽器具有500px和600px的高度，則只能滾動100px。如果頁面高度小於500像素，則不存在滾動。

請這個<div class="test-box">test6</div>改成這樣：

<div class="test-box" style="height:1000px;">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>

來源

2017-03-05 13:47:33

解決

原來，這是我的CSS文件造成的問題...如果有其他人遇到類似的問題，我會建議一個接一個地評論任何js和css文件，看看是否修復它。這可能會幫助您確定哪個文件導致了問題...

與我的CSS問題是以下幾點：

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


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

來源

2017-03-05 15:36:41

jQuery中的ScrollTop問題（主要在Chrome中）

回答

相關問題