Safari iPad上的bug：ScrollTop

Question

我用bootstrap制作了一个响应式网站，并在导航栏中添加了锚点html。我的导航栏中有一个logo，当用户点击它时，网站会滚动到顶部。在桌面上一切正常。但是在使用Safari的iPad上，当我点击标志以滚动到顶部时，它只能工作一次。之后我的带有锚点的导航栏出现错误。

如何解决这个问题？

我的代码是：

$(document).ready(function(){
$('.brand').bind('click',function(){
    $('html,body').animate({scrollTop: 0}, 'normal');
});
});

- user2507113

Answer 1

更新

尝试使用“on”绑定方法

自Jquery 1.7+以来，更好的方法是使用“on”方法而不是bind。

$(document).ready(function()
{
$(".brand").on("click", function ()
 { 
  $('body').animate({scrollTop: 0}, 'normal');
alert('image is clicked')
 });

});

感谢 AB

- Arun Bertil

---

在更改之后，我遇到了相同的问题。 - user2507113

为什么 on 更好？而且 img 选择器突然从哪里来的？ - a better oliver

img选择器是指您的标志是一张图片，对吗？请提供它的ID。 - Arun Bertil

on() 方法是 bind()、live() 和 delegate() 方法的新替代品。该方法为 API 带来了很多一致性，因为它简化了 jQuery 代码库。 - Arun Bertil

.scrollTop 在 $("body") 上可以运行，但在 $("html, body") 上不起作用... 在 Safari 中应该可以。 - Arun Bertil

Answer 2

我遇到过同样的问题。在某个地方看到，移动 Safari 不会滚动 body，它会移动 viewport，所以你需要滚动 div。

如果你在使用 jQuery，你可以使用 scrollTo 插件 或者硬件加速的 velocity.js- 这对我很有效。请注意，velocity 要求滚动的元素具有非静态位置（即相对、绝对、固定）。

- dehumanizer