Iframe scroll due to the links inside it

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.

  • Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
  • Add an Anchor link to a Div AND its Pseudo Element (CSS or Javascript / jQuery)
  • How to capture an anchor value from url in Ruby on Rails?
  • Simulate click at an anchor tag via javascript
  • How to get full anchor href?
  • Is it possible to have traditional anchor links in Angular.js applications
  • How to handle anchor hash linking in AngularJS
  • Remove wrapping <a> anchor tag from an image using jQuery
  • How to capture an anchor value from url in Ruby on Rails?
  • anchors click function not working in firefox
  • How do I scroll an overflowed div to a certaing hashtag (anchor)?
  • How to go to an specific anchor when entering the page (doesn't work)
  • 2 Solutions collect form web for “Iframe scroll due to the links inside it”

    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.

    Try this JavaScript solution…

        function autoScroll() {
            window.scroll(0,200); // Horizontal/Vertical Position
        }
    
        <a href='javascript:autoScroll()'>Normal Link</a>
    

    When clicked, this will automatically scroll the window to a certain point (200 pixels down from the top). Or, you can have it auto scroll on page load using this:

        <body onLoad="javascript:autoScroll()">
    

    Okay, here’s another solution that seems to work (a modified version of this page:

    Stack Overflow – Scrolling an iframe with javascript?

    First, make pages: home.html, container.html & website.html

    On home.html, put this:

    <html>
    <head>
    <title>Home</title>
    </head>
    <frameset rows="*,1000">
    <frame src='container.html' noresize='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'>
    <frame src='website.html' noresize='yes' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'>
    </frameset>
    </html>
    

    On container.html:

    <html>
    <head>
    <title>Container</title>
    </head>
    <body bgcolor='#ff0000'>
    Any content you want...
    </body>
    </html>
    

    On website.html:

    <html>
    <head>
    <title>Website</title>
    </head>
    <body onLoad="window.scrollTo(0,150)">
    <iframe id='iframe' src='http://www.cnn.com" height='1000' width='100%' frameborder='0' marginheight='0' marginwidth='0' scrolling='no'>
    </iframe>
    </body>
    </html>
    

    Now here’s the thing – no matter what page you go to from that start page on cnn.com, the page will always shift 150 pixels downward. On home.html, the 1000 refers to pixels going upwards from bottom to top of page. So if you set it to 100, you will see the container.html page in the top part of the browser and at the bottom 100 pixels you will see website.html (with its content shifted 150 pixels downward). The reason why I made the height so high (1000) is that it will allow the full height of the browser window to be utilized – no one will even see container.html unless you want them to. You may have to mess with the values/scrolling/etc. to get what you need exactly.

    This should get you working!