Anchor in Iframes

The following example shows how to load a page into an iframe and position at an anchor.
The first 3 links will load a page at a specific anchor point, page 4 does not have any anchors

This method does not affect the scroll position of the parent page.

Page 1 Page 2 Page 3 Page 4

When a link is clicked that also calls the function goAnchor the variable anchorID is assigned the anchor ID passed to it .
When the iframe has loaded the onload event in the iframe tag also calls the function goAnchor and if the value of variable anchorID is not null it positions the page at the appropriate anchor.

Any element in the iframe page can be used as an anchor simply by giving it an ID or referencing an existing ID within that page

<div id="anchor1">Anchor 1</div>

then add onclick="goAnchor('anchor1')" to the link calling the page, this allows you to load pages with or without anchors. 

<HTML>
<HEAD>
<TITLE>Iframe Anchors</TITLE>

<script type="text/javascript">

anchorID=null

function goAnchor(){

if(typeof arguments[0]!="undefined"){
anchorID=arguments[0]
}
else{

if(anchorID!=null){
anchorPos = window.frames['anchor_iframe'].document.getElementById(anchorID).offsetTop
window.frames['anchor_iframe'].document.body.scrollTop = anchorPos
anchorID=null
}

}

}

</script>

</HEAD>
<BODY>
<h1>Anchor in Iframes 1</h1>

<center>
<a href="iframe_page1.htm" target="anchor_iframe" onclick="goAnchor('anchor1')">Page 1</a>
<a href="iframe_page2.htm" target="anchor_iframe" onclick="goAnchor('anchor2')">Page 2</a>
<a href="iframe_page3.htm" target="anchor_iframe" onclick="goAnchor('anchor3')">Page 3</a>
<a href="iframe_page4.htm" target="anchor_iframe">Page 4</a><BR><BR>
<iframe name="anchor_iframe" src="" width=400 height=200 onload="goAnchor()"></iframe>
</center>

</BODY>
</HTML>