How to avoid anchors in iframes to scroll parent page

Question

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?

Answer 1

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

Answer 2

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.