如果存在视口,为什么 jQuery animate 在移动设备上不起作用?



所以以下内容在桌面上的网页上工作正常,但不会导致移动设备上的任何滚动......

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

这篇文章似乎表明它与移动设备不是在身体上滚动而是在视口上滚动有关。如果我从我的页面中删除这个视口标签,那么滚动确实有效......

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

但是我见过存在视口标签但动画有效的页面,那么什么给了?

我遇到了他描述的同样的问题。我正在使用这个:

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

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

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

就我而言,当窗口宽度低于 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 
}

最新更新