JQuery와 scrollTop 애니메이션은 클릭 이벤트가

Question

코드는 아래에 400 또는 600에 신체의 scrollTop을 애니메이션 것입니다 클릭하면 그것은 아이폰 OS 사파리 데스크톱에 잘 작동 것이 아니라 링크가 IOS 사파리에서 작동이 중지됩니다. 스크롤하는 애니메이션이 작동하지만 애니메이션이 어떻게 든 클릭 이벤트 리스너를 사용할 수 없게됩니다. 사용자는 클릭 이벤트를 다시 활성화하기 위해 페이지를 수동으로 스크롤하는 것과 같은 몇 가지 작업을 수행해야합니다.

문제를 시뮬레이트하려면 첫 번째 링크를 클릭하면 페이지가 아래로 스크롤됩니다. 그 후에 다른 링크 (이번에는 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.....