Jumping to anchor in iframe

Question

Situation:

First: iframe with id miframe, displaying a site with the anchor called suchen, i.e.

<div id="suchen"></div>. 

Second. Parent frame.

Goal: Make a link within the parent frame looking like

<a class="LINK0" title="" href="javascript:springen('suchen');">w/e</a> 

make the content in the iframe be scrolled to the anchor suchen. My approach.

function springen(anker) { 
    var childWindow =  document.getElementById("miframe").contentWindow;

    // this should emulate a click on the ptAnchor DIV's child A HREF.
    //childWindow.document.getElementById(anker).firstChild.click();
    //childWindow.document.getElementById(anker).scrollIntoView();
    // alternatively, this will simply scroll the child window to the top-left corner
    //childWindow.scrollTo(0,200);
}

childWindow.scrollTo(0,200); works in so far, that scroll happens to 200. But I need scrolling to the very anchor, wherever it is in the iframe. Ideas?

Answer 1

Normally you would use a link like <a href="#your_anchor_name_or_id">Go to the anchor</a>. If you want to do this using JavaScript, you can change the value of window.location.hash. The following code should do that within a frame:

document.getElementById("the_id_of_your_iframe").contentWindow.location.hash = "your_anchor_name_or_id";

If you don't want to change the hash value, there is an example on MDN. You can modify it for an iframe.

Answer 2

The following code should scroll the iframe to the anchor's position:

function springen(anker) { 
    var childWindow =  document.getElementById("miframe").contentWindow;
    childWindow.scrollTo(0,childWindow.document.getElementById('suchen').offsetTop);
}

Edit:

JSFiddle: http://jsfiddle.net/pkvhw/6/