jQuery scrollTop not working inside iframe on iOS

Question

iOS and iframes.. such a pain. I've a simple back to top button which should animate the scrolling (instead of just jumping to the top of the page).

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

This works everywhere, except for iframes on iOS. I still haven't fully understood how iOS handles iframes. jQuery's .scrollTop() function won't work either (which can't be animated anyway).

The only thing which works in iframes on iOS is this:

parent.self.scrollTo(0, 0);

Obviously not the best solution since this won't work for desktop browsers. Any deeper knowledge on how to fix this or iframes on iOS in general is greatly appreciated.

Answer 1

Seems like specificing the context fixes the issue:

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

Since this will only work for iOS I've included the iOS detect from this thread:

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");
    }
});

Apparently only parent.document works as the context. parent.window or only document have no effect.