Jquery animate scrollTop導致點擊事件停止在IOS Safari瀏覽器上工作

Question

下面的代碼有鏈接，點擊時會將主體的scrollTop動畫設置爲400或600.它在桌面上運行良好，但在iOS Safari中不能運行。滾動動畫正在工作，但動畫以某種方式禁用了click事件偵聽器。用戶必須執行一些操作（如手動滾動頁面）才能重新啓用點擊事件。

要模擬該問題，請單擊第一個鏈接，頁面將向下滾動。之後，點擊其他鏈接，這次（在iOS Safari上），鏈接點擊不再有效。嘗試向下滾動一下，鏈接將再次運行。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<style> 
#test, #test2 { 
    float: left; 
    position: fixed; 
    top: 200; 
} 
#test2 { 
    top: 250; 
} 

#job{ 
    float: left; 
    width: 300px; 
    margin-left: 200px; 
} 
</style> 

<script> 
    $(function(){ 
     $("#test").click(function(e){ 
      e.preventDefault(); 
      $('body').animate({scrollTop: 400}); 
     }); 

     $("#test2").click(function(e){ 
      e.preventDefault(); 
      $('body').animate({scrollTop: 600}); 
     }); 
    }); 
</script> 


<a href="#job" id="test"> Test one</a> 
<a href="#job" id="test2"> Test two</a> 

<div id="job"> 
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" 

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" 

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" 

</div> 

我該如何解決這個問題？

Answer 1

嘗試指定html爲好，這是你通常看到的動畫滾動的修復跨瀏覽器的工作：

$('html, body').animate.....