Anchor in Iframes

See also Scroll Method

Direct Method

Go directly to an anchor point within a document in the iframe.



Anchor Page   Non Anchor Page

The anchor links in the parent page are written by the page loaded into the iframe, this is to ensure that if multiple pages are used with a different number of anchors the number of links will correspond.
The links are removed from the parent page when the page is unloaded so that if a page without anchors is used in the iframe unrelated links are not shown. 

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!--

function goAnchor(id){
anchorPos = window.frames['anchor_iframe'].document.getElementById(id).offsetTop
window.frames['anchor_iframe'].document.body.scrollTop = anchorPos

}

// -->
</script>
</HEAD>
<BODY>
<div id="iframelinks"> </div>
<P>
<iframe name="anchor_iframe" id="anchor_iframe" src="iframe_anchor_dir2b.htm">
</BODY>
</HTML>

iframe_anchor_dir2b.htm example page. 

<HTML>
<HEAD>
<TITLE>iframe_anchor_dir2b</TITLE>

<script type="text/javascript">

function createLinks(){
parent.document.getElementById("iframelinks").innerHTML=
'<a href="#null" onclick="goAnchor(\'anchor1\')"><b>Anchor 1</b></a><br>'
+'<a href="#null" onclick="goAnchor(\'anchor2\')"><b>Anchor 2</b></a><br>'
+'<a href="#null" onclick="goAnchor(\'anchor3\')"><b>Anchor 3</b></a><br>'
+'<a href="#null" onclick="goAnchor(\'anchor4\')"><b>Anchor 4</b></a><br>'
+'<a href="#null" onclick="goAnchor(\'anchor5\')"><b>Anchor 5</b></a>'
}

function clearLinks(){
parent.document.getElementById("iframelinks").innerHTML=""
}

// add  onload="createLinks()" onunload=" clearLinks()" to the opening BODY tag

</script>

</HEAD>
<BODY onload="createLinks()" onunload=" clearLinks()">
<div style="background-color:#afa">
<div id="anchor1">Anchor 1</div>
<br><br><br><br><br><br><br><br><br><br>
</div>

<div style="background-color:#ffa">
<div id="anchor2">Anchor 2</div>
<br><br><br><br><br><br><br><br><br><br>
</div>

<div style="background-color:#faa">
<div id="anchor3">Anchor 3</div>
<br><br><br><br><br><br><br><br><br><br>
</div>

<div style="background-color:#aaf">
<div id="anchor4">Anchor 4</div>
<br><br><br><br><br><br><br><br><br><br>
</div>

<div style="background-color:#faf">
<div id="anchor5">Anchor 5</div>
<br><br><br><br><br><br><br><br><br><br>
</div>

</BODY>
</HTML>

Direct Auto Load

Show the iframes document at the selected anchor when the parent loads.

The following links open iframe_anchor_dir2b.htm which contains an iframe.
Depending on which link you select denotes at which anchor point the iframes document is loaded at.

<a href="iframe_anchor_dir2c.htm?anchor1">Anchor 1</a>
<a href="iframe_anchor_dir2c.htm?anchor2">Anchor 2</a>
<a href="iframe_anchor_dir2c.htm?anchor3">Anchor 3</a>
<a href="iframe_anchor_dir2c.htm?anchor4">Anchor 4</a>
<a href="iframe_anchor_dir2c.htm?anchor5">Anchor 5</a>