jQuery scrollTop not working inside iframe on iOS

10,350

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.

Share:
10,350

Related videos on Youtube

Dirk
Author by

Dirk

Updated on October 10, 2022

Comments

  • Dirk
    Dirk over 1 year

    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.

  • krlzlx
    krlzlx over 8 years
    Very good solution! parent.document did the trick for me. Thanks
  • Malasorte
    Malasorte about 8 years
    Does this still work for you? For me, iOS 9.2 on an IPad 3 no result. Copyed your code exactly!
  • Alexander Derck
    Alexander Derck almost 5 years
    Works like a charm on iOS12.2