How do I Scroll parent page to top when child page is click within iframe?

Question

When someone clicks on a link within an iframe (child page), how do I get the parent page to scroll to the top? The issue is the child page will remain in the same spot of the page, because the iframe has a lot of height larger than the parent page.

Please note: the parent and child pages are on different sub domains.

I created a demo to show this: http://www.apus.edu/_test/iframe/index.htm

score 56 · Accepted Answer · edited Aug 27 '15 at 11:52

56

The trick is to append the following onload="window.parent.parent.scrollTo(0,0)" to the iframe and that should do it!

edited Aug 27 '15 at 11:52

Rajan Goswami

769
1
5
17

answered Jun 26 '10 at 20:56

Evan

3,411
7
36
53

2

Thanks! It also works if you do onload="window.parent.scrollTo(0,0)" in the body tag within the iframe. – aruanoc Feb 21 '14 at 16:51
2

adding onload to the iframe tag is so much sexier than adding it to the body tag, because not a lot of folks have the option to manually tag the 'body' should they use a CMS for example. Good suggestion though! – Evan Jun 13 '14 at 14:04
7

@aruanoc Works only if the domain within the iframe matches the parent domain. – Sascha Apr 17 '15 at 12:51
Worked as a charm. – Rachit M Garg Apr 14 '16 at 08:51
@voodoocode do you know how to do it when the domain within the iframe doesnt match the parent domain..? – estellechvl May 17 '16 at 09:10
2

@EstelleChvl I think this isn't possible due to X-Origin Policy. – Sascha May 18 '16 at 12:04
2

Please correct me if I'm wrong, but I think: 1. one parent is enough, no need for parent.parent, 2. this code must be attached to the body tag of the child document within the iframe. There is no way to do it from the parent document. – Jpsy Sep 18 '16 at 14:54
And sadly it can't be a subdomain either, has to be the same domain. – Jack Marchetti May 12 '17 at 01:10

score 19 · Answer 2 · edited Dec 05 '18 at 13:31

19

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);
}

edited Dec 05 '18 at 13:31

dschu

4,992
5
31
48

answered Dec 06 '17 at 20:46

Doaa

436
4
10

Best answer here. Not sure you have to check event.origin though, I think browser handle this. Also, I would use a switch on `event.data.task` but that doesn't change the logic anyway. – Apolo Sep 04 '18 at 09:47
Should parent / child origin just be the domain, or the full URL of the parent / child? i.e. should the `parent_origin` be `https://test.testsite.com`, or should it be `https://test.testsite.com/path/to/my/page.html/`, where the second URL is the URL of the parent page? – Johndt Oct 29 '18 at 15:49
Thank you. I've been looking for a solution for a while. This worked with me. It worked when I modified var parent_origin = 'http://your/iframe/domain/here' to the URL of the parent and not the iframe var parent_origin = 'http://your/parent/domain/here' – user3631926 Aug 01 '19 at 11:22

James Lawruk · Answer 3 · 2020-02-17T20:10:55.113

12

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.)

edited Feb 17 '20 at 20:10

answered Dec 24 '13 at 01:59

James Lawruk

30,112
19
130
137

1

If embedded on a different domain this won't work due to cross origin restrictions – Felix Nov 26 '19 at 14:41

score 5 · Answer 4 · answered Apr 30 '14 at 10:38

5

Within the Iframe page.

window.parent.ScrollToTop(); // Scroll to top function

On The parrent page:

window.ScrollToTop = function(){
  $('html,body', window.document).animate({
    scrollTop: '0px'
  }, 'fast');
};

answered Apr 30 '14 at 10:38

steffanjj

881
9
10

score 0 · Answer 5 · answered Dec 19 '19 at 01:30

0

With animation

           window.parent.scroll({
              top: 0,
              left: 0,
              behavior: 'smooth'
            });

answered Dec 19 '19 at 01:30

sree

3,113
2
18
13

How do I Scroll parent page to top when child page is click within iframe?

5 Answers5

Linked