jQuery scrollTop not working inside iframe on iOS
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.
Related videos on Youtube
Dirk
Updated on October 10, 2022Comments
-
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 over 8 yearsVery good solution!
parent.document
did the trick for me. Thanks -
Malasorte about 8 yearsDoes this still work for you? For me, iOS 9.2 on an IPad 3 no result. Copyed your code exactly!
-
Alexander Derck almost 5 yearsWorks like a charm on iOS12.2