Iframe scroll due to the links inside it

Question

I have a page with a fixed header div like a tool bar and an Iframe which loads content form the same/different domains. The problem is whenever a link inside the iframe is clicked, it scrolls the page to the top hiding the toolbar itself. This happens in desktop/mobile webkit browsers.

Note:- I found the reason for why the iframe scrolls the parent page when any link inside it is clicked, it turns out that if the anchor tags within the iframe have empty hash values i.e href="#" and if they are clicked then it causes the parent page to scroll to point from where the iframe starts. This happens in webkit browsers only for me. This is not reproducible in FF.

actually its a webapp...and is not completely live yet, cannot upload it anywhere. Let me know where can i upload a sample page. — Abhidev, Feb 08 '12 at 07:10

score 1 · Answer 1 · edited Oct 10 '12 at 10:34

If you are dealing with the problem in Javascript simply use this code:

ifrm.setAttribute("onload","scroll(0,0);"); //(ifrm is the id of the iframe)

or

<script language="javascript"> 
    function totop() { 
        scroll(0,0); 
    } 
</script>

and in your html for iframe, add an onload attribute as below:

<iframe name="iframe" onload="totop()">

Got this 2nd solution from another forum, and changed to the 1st one to suit my requirement as I am creating the iframe element and setting its properties in javascript and not in html. It worked for chrome as well as IE. FF didn't have the problem in the first place.

Iframe scroll due to the links inside it

1 Answers1