Geek Answers Handbook

JQuery scrollTop not working inside iframe on iOS

iOS and iframes .. such a pain. I have a simple inverse to the top button, which should animate the scroll (and not just jump to the top of the page).

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

This works everywhere except iframes on iOS. I still do not quite understand how iOS handles frames. The jQuery.scrollTop () function will also not work (which cannot be animated).

The only thing that works in iframes on iOS is:

parent.self.scrollTo(0, 0);

Obviously, this is not the best solution, as it will not work for desktop browsers. Any deeper knowledge on how to fix this or iframes on iOS in general is greatly appreciated.

+4
source share
1 answer

The context specification seems to fix the problem:

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

iOS, 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 .

+5

More articles:


All Articles