How do I Scroll parent page to top when child page is click within iframe?
Using JavaScript within the iframe, reference the parent and call the scroll() method.
window.parent.scroll(0,0);
(Note. This will not work if the iframe Url is a different domain than the parent.)
If you have cross origins (the iframe and the parent have different domains), then just calling window.scrollTo(0,0) won't work.
One solution to cross-origin is to send a trusted message from the iframe to the parent.
Code inside the iframe:
var parent_origin = 'http://your/iframe/domain/here'
parent.postMessage({'task': 'scroll_top'}, parent_origin);
Then code in the parent:
function handleMessage(event) {
var accepted_origin = 'http://your/iframe/domain/here';
if (event.origin == accepted_origin){
if (event.data['task'] == 'scroll_top'){
window.scrollTo(0,0);
}
// you can have more tasks
} else{
console.error('Unknown origin', event.origin);
}
}
window.onload = function() {
window.addEventListener("message", handleMessage, false);
}
The trick is to append the following onload="window.parent.parent.scrollTo(0,0)"
to the iframe
and that should do it!