如果存在视口，为什么jQuery animate无法在移动设备上运行？

Question

So the following works fine on my webpage on Desktop but doesn't cause any scroll on Mobile...

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

This post seems to suggest it has something to do with mobile devices not scrolling on body but on viewport instead. And if I remove this viewport tag from my page then the scroll does work....

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

But I have seen pages where the viewport tag is present but the animation works, so what gives?

Answer 1

In my case, I'm using a hamburger menu when the windows width is under 930px. Below this limit, the scroll were broken because I needed to make the site-content scroll instead of the body :

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

I'm having the same problem as he described. I'm using this:

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

And as he described, when removing <meta name="viewport" content="width=device-width, initial-scale=1.0">

Things start working. And it's not related to mobile device or browser because it happends in Chrome console too.