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!