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.

score 6 · Answer 1 · edited May 23 '17 at 12:02

6

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.

edited May 23 '17 at 12:02

Community

1
1

answered May 28 '15 at 07:10

Dirk

338
1
2
8

2

Very good solution! `parent.document` did the trick for me. Thanks – krlzlx Nov 24 '15 at 14:05
1

Does this still work for you? For me, iOS 9.2 on an IPad 3 no result. Copyed your code exactly! – Malasorte Jan 21 '16 at 15:21
Works like a charm on iOS12.2 – Alexander Derck May 09 '19 at 11:41

jQuery scrollTop not working inside iframe on iOS

1 Answers1

Linked