如果存在视口，为什么 jQuery 动画不能在移动设备上运行？答案

【问题标题】：Why does jQuery animate not work on mobile devices if viewport is present?如果存在视口，为什么 jQuery 动画不能在移动设备上运行？
【发布时间】：2017-05-24 21:08:31
【问题描述】：

因此，以下内容在我的桌面网页上运行良好，但在移动设备上不会导致任何滚动...

 $("HTML, BODY").animate({
        scrollTop: 500
    }, 1000);

This post 似乎暗示它与移动设备有关，而不是在身体上滚动，而是在视口上滚动。如果我从我的页面中删除这个视口标签，那么滚动确实可以工作......

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

但是我已经看到了存在视口标签但动画有效的页面，那么给出了什么？

【问题讨论】：

很难告诉你为什么没有更多的上下文。我一直使用 jQuery animate 并且在移动设备上从未遇到过问题，viewport 标签与否。但是，您链接的资源说使用 $("body") 而不是 $("html, body") - 您尝试过吗？
你用的是什么手机浏览器？

标签： javascript jquery css mobile

【解决方案1】：

我遇到了和他描述的一样的问题。我正在使用这个：

$(".buttonTop").click(function() {
  $('html, body').animate({
      scrollTop: $(".bestline").offset().top},
      1300);
});

正如他所描述的，当删除<meta name="viewport" content="width=device-width, initial-scale=1.0">

事情开始起作用了。而且它与移动设备或浏览器无关，因为它也发生在 Chrome 控制台中。

【讨论】：

【解决方案2】：

就我而言，当窗口宽度低于 930 像素时，我使用的是汉堡菜单。低于这个限制，滚动被破坏了，因为我需要让网站内容滚动而不是正文：

var page = $('#myAnchor'); // target page
var speed = 750; // animation (ms)

if ($( window ).width() <= 930 ){
        $('.site-content').animate( { scrollTop: $(page).offset().top }, speed );
}
else {
        $('html, body').animate( { scrollTop: $(page).offset().top }, speed, function(){//calback} ); // Go 
    }

【讨论】：