Question

因此，以下在我的桌面网页上工作正常，但不会导致移动设备上的任何滚动...

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

This post似乎暗示它与移动设备有关，而不是在机身上滚动而是在视口上滚动。如果我从我的页面中删除此视口标记，则滚动确实有效....

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

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

Answer 1

在我的情况下，当窗口宽度低于930px时，我正在使用汉堡包菜单。低于此限制，滚动被破坏，因为我需要制作网站内容滚动而不是正文：

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 
    }

Answer 2

我遇到了与他描述的问题相同的问题。我正在使用这个：

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

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

时

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

如果存在视口，为什么jQuery动画不适用于移动设备？

2 个答案: