jQuery scrollTop在iOS上的iframe内部无法正常工作

时间:2015-05-27 09:20:03

标签: jquery ios iframe scrolltop

iOS和iframe ..这样的痛苦。 我有一个简单的返回顶部按钮,它应该为滚动设置动画(而不是仅仅跳到页面顶部)。

$(document).on('click touchstart', '.backtotop', function() {
    $('html, body').animate({ scrollTop: 0 }, 1500);
});

除了iOS上的iframe之外,它无处不在。我还没有完全理解iOS如何处理iframe。 jQuery的.scrollTop()函数也无法工作(无论如何都无法动画)。

在iOS上唯一适用于iframe的是:

parent.self.scrollTo(0, 0);

显然不是最好的解决方案,因为这不适用于桌面浏览器。 任何有关如何在iOS上解决此问题或iframe的更深入的知识都非常受欢迎。

1 个答案:

答案 0 :(得分:5)

似乎特定上下文修复了问题:

$('body, html', parent.document).animate({ scrollTop: 0 },1500);

由于这只适用于iOS,我已经在this thread中包含了iOS检测:

var iOS = ( navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false );

$(document).on('click touchstart', '.backtotop', function() {
    if (iOS) {
        $('html, body', parent.document).animate({ scrollTop: $("body").offset().top},1500,"easeOutQuart");
    } else {
        $('html, body').animate({ scrollTop: $("body").offset().top},1500,"easeOutQuart");
    }
});

显然只有 parent.document 作为上下文。 parent.window 或仅文档无效。