scrollTop適用於Mozilla，但不適用於Chrome

我想通過JavaScript添加scrollTop動畫。它在Mozilla中正常工作，但在Chrome中完全沒有問題。點擊Chrome中的鏈接不會執行任何操作。scrollTop適用於Mozilla，但不適用於Chrome

這裏是我的代碼：

<script type="text/javascript"> 

     $(document).ready(function() { 
      $('a[href=#smart_tshirt]').click(function(){ 

       $('html, body').animate({scrollTop:1400}, 'slow');      
      }); 
      $('a[href=#smart_tshirt2]').click(function(){ 

       $('html, body').animate({scrollTop:1400}, 'slow');      
      });  
      return false; 
     });    
    </script> 

<div style="top: 0px; left: 140px; font-size: 32px; text-align: left; width: 100%;  
height: 47px; font-family: 'League Gothic'; color: rgb(102, 102, 102); line-height: 
25px; float: left;"><a href="#smart_tshirt" id="#smart_tshirt">Smart<br /> 

T-shirt</a></div> 

<div style="top: 80px; left: 140px; font-size: 14px; text-align: left; height: 100px;  
font-family: 'Carrois Gothic',sans-serif; color: rgb(102, 102, 102); line-height: 19px; 
width: 130px; float: left;">With integrated cardiac sensors.</div> 


<div style="top: 29px; left: 260px; width: 19px; height: 19px; float: left;"><a 
href="#smart_tshirt2" id="#smart_tshirt2"><img alt="smart t-shirt" 
src="images/universo/flechaNar.jpg" /></a></div> 

</div>

來源

2014-07-21 Dr Manhattan

你想要什麼在你的全局對象與return false;來完成？這必須添加到您的click事件中以防止正常行爲。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('a[href*="#smart_tshirt"]').on('click', function() { 
      $('html, body').animate({ scrollTop: 1400 }, 'slow'); 

      return false; 
     }); 
    });    
</script>

而且你不必僅僅因爲<a>第二href=""包含了許多加倍您的功能。只需使用a[href*="#"]這意味着屬性包含選擇器。閱讀更多關於here。

第二個問題是，您無法使用#或數字開始ID。 ID和課程必須始終以字母開頭。像這樣編輯你的HTML，一切正常。

<a href="#smart_tshirt" id="smart_tshirt">Smart T-shirt</a>

工作例如：http://jsfiddle.net/3mPfc/10/

來源

2014-07-21 09:47:17 morkro

非常感謝，讓我試試看 –

@DrManhattan如果仍然沒有工作，請準備上[的jsfiddle]爲例（http://jsfiddle.net/）爲我們編輯你的問題。 – morkro

這裏是小提琴： - > [鏈接到小提琴]（http://jsfiddle.net/3mPfc/） –

scrollTop適用於Mozilla，但不適用於Chrome

回答

相關問題