1

下面的代码有链接，点击后会将 body 的 scrollTop 设置为 400 或 600。它在桌面上运行良好，但在 iOS safari 上运行良好。滚动动画正在工作，但动画以某种方式禁用了单击事件侦听器。用户必须执行一些操作（例如手动滚动页面）才能重新启用点击事件。

要模拟问题，请单击第一个链接，然后页面将向下滚动。之后，单击另一个链接，这次（在 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>

我该如何解决？

4

1 回答 1

1

尝试指定html，这是您通常看到的动画滚动作为跨浏览器工作的修复：

$('html, body').animate.....
于 2012-07-05T07:30:32.200 回答