How to avoid anchors in iframes to scroll parent page

link to part of page without anchor
html anchor paragraph
html page marker
getting a link to go to a specific section on another page
html link to part of page
url jump to text
link to h2
how to link to a specific part of someone else's page

So, here's the problem: I have a quite long page with an iframe in the middle. Now, if an anchor is clicked in the iframe, the entire page is scrolled to the iframe, which is what I want to avoid.

Here's an example: http://jsfiddle.net/ymbV7/1/ Don't scroll down the page, but scroll the iframe until you can see the "Contents" menu, and try any of the links (for example "Features").

I need the external page not to scroll, while the iframe has to correctly scroll to the clicked anchor.

Any ideas?

So you are telling that you want to move to a particular paragraph when clicked on the link which describes the link detail right?

According to what I understand you can do like this.

<a href="#exactline">Click here</a>

Instead of Click here you can write Features, as of what I saw in http://jsfiddle.net/ymbV7/1/

now to link to the place where it should move all you need to do is this:

<h2><a name="exactline">Linking Directly from Features</a></h2>
<p>To override this behaviour, certain standard techniques can be used. In particular, you will need to create named anchors in the body of the text at the point where you want to link to.
</p>

"exactline" is the link name given to the para or heading you what to refer.

It scrolls only the iframe and not the whole Page..

refer this link for more clearance

http://www.thesitewizard.com/html-tutorial/link-to-specific-line-or-paragraph.shtml

I tried and it worked for me

How to avoid anchors in iframes to scroll parent page, Now, if an anchor is clicked in the iframe, the entire page is scrolled to the iframe, which is what I want to avoid. Here's an example: http://jsfiddle.net/ymbV7/1/  Then move the body to that offset position. One important thing is that we are preventing the default action of anchor tag by returning false in end of the click function which prevent anchor in an iframe from scrolling the parent window.

Trying various combinations of setting the frame's location or hash still unfortunately resulted in the parent scrolling.

So this is what I ended up doing since the iframe's content was on the same domain so there wasn't a cross-site issue navigating the frame DOM.

I modified the links in the parent so instead of doing target="myiframe", I added an o'clock function to do the scrolling bypassing the default implementation (which seems to cause the parent to jump to the iframe).

<a onclick="linkFunction(this, event);return false;"...

The link function looks like this:

/// for scrolling iframe without jumping parent page
function linkFunction(atag, event) {
    event.preventDefault();
    var iframe = document.getElementById('myiframe');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var name = atag.href.split('#')[1]; // get the hash
    var anchor = innerDoc.getElementsByName(name)[0]; // find the corresponding anchor tag
    // get position of the anchor relative to the current scroll position
    var offset = anchor.getBoundingClientRect().top
    // jump scroll the iframe content to the anchor
    iframe.contentWindow.scrollBy(0, offset)
}

No JQuery and still works properly if javascript disabled (just reverts to the default parent jumping).

Hope this helps someone else.

How to avoid anchors in iframes to scroll parent page, Q: how do i stop the parent page from scrolling with the iframe? A: you can't stop this behaviour no matter how hard you try. "a good question is as  I could not solve this problem using anchors, so I found a different way - I kept track of the x,y co-ordinates of the scroll position of the page (where the anchor would have been) and used the javascript scrollTo(x,y) instead to go to that part when the "a href" was clicked on.

Try to put your content into a table like this:

<table cellpadding=0 cellspacing=0 height="100%" width="100%">
  <tr>
    <td> 
      Header
    </td>
  </tr>

  <tr>
    <td>
      <iframe src="http://en.wikipedia.org/wiki/jQuery" height=600 width="90%"></iframe>
    </td>
  </tr>
  <tr>
    <td> 
      Footer
    </td>
  </tr>
</table>

Refer to http://www.webdeveloper.com/forum/showthread.php?t=212032

Anchor link in iframe makes parent page scroll too, How can I navigate to an anchor in a parent document (iFrame)? Clicking on it should scroll down to the address data on the main page. the iFrame is the only way to avoid collisions with the Wordpress theme. How can I  Clicking on a certain object should navigate to an HTML anchor in the parent document. Normally you can do this with “#anchorname” and “target=_parent” in the URL. Unfortunately the Mouse Click Event does not allow to set a target.

I think if you did <a target="name of iframe" href="#name of anchor">Click here</a> it would work because then the link is opening in the iframe and this is possibly why the anchor was making the whole page scroll to the iframe. Hope I helped and hope it works! :)

How can I navigate to an anchor in a parent document (iFrame , I enabled scrolling and set properties of iframe this way: How to stop parent window down to that content without the use of an anchor tag in the framed page? 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.

Maybe it's a bug in chrome, because this issue not happen in the latest IE and Firefox.

It happended when clicked anchor in iframe, and browser try to align the anchor to the top of the window.

I solved this issue use JavaScript(jQuery):

$('body').on('click', 'a', function(e) {
    if($(this).attr('href').startsWith('#')) {
        e.preventDefault();
    }
});

I hope it can help you & good luck!

Scroll iframe page, after export when we add this tour in iframe there shows scroll problem html a (​anchor) tag with # href. when visitor click any control the page scroll to However, I don't see the parent window scroll when I click the buttons  When it does try to focus the element inside of the frame, it should scroll the page upward, then once loaded place the iframe back in it's intended position. Of course, without knowing more, it's hard to say for sure which tradeoffs are okay, and both of these options have conditions that are a tad racy, so YMMV.

Fixed anchor link prevent default after export using tools · Issue , When clicking one of the anchor links in the iframe, I needed to change the hash in the URL of the parent page. Also, since the iframe doesn't  How to do a link to an iframe page that calls up a page to go in the frame then proceeds to an anchor in that page (phew!)? Please read carefully. Code in the iframe page (page_one.htm), the one

Javascript: Scroll to anchors in iframes - Shorts, These pages use links within the page to allow the student to jump In an attempt to avoid having two scroll bars -- one in the <iframe> Oooooh, I bet you are going to run into trouble with those # local anchors. The problem is that the resizing script needs installed in the parent window (Canvas) and  In the parent, there's an event listener that sets the url hash by appending the anchor to window.location when it gets a setAnchor message from the frame. After that happens, a hashchange event is triggered, which calls the sendHash function to post the anchor back to the iframe.

Intra-page links not working in embedded HTML file, The problem is the new page in the iframe shows a big white … Use scrollto or similar in the page that loads within the iframe to jump to the anchor. you submit you want to scroll the parent to the top of the iframe and shrink the iframe's height. postMessage() method to avoid cross-origin restrictions. We are using a scrolling iFrame to present a list of options to the user within the main page with an anchor against each option. Depending on the user actions, we jump to an anchor in the frame with code like this: theFrameSrc = theFrame.src; theFrame.src = theFrameSrc + "#" + anchorName;

Comments
  • I have got the same problem. Chrome and FF tested.
  • Tested on Chrome 17.0.963.56 On Firefox 10.0.1, the problem doesn't exist.
  • Still happening, see here jsfiddle.net/ymbV7/8 and here jsfiddle.net/ymbV7/9 I'm on OSX and using Chrome 17.0.963.65
  • Yes, this is what is happening but what I (and I think the OP) want is for the frame to scroll but not affect the parent page. I have the case where the frame is on screen but clicking the link (which is above the frame) causes the link to go out of view (which is not desirable).