The script is coded into the parent page but 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 non scrolling page is used in the iframe unrelated links are not shown.
parent_page.htm
<script type="text/javascript">
<!--
scrollSteps = 10
timer=""
function scrollWin(id){
clearTimeout(timer)
frame=window.frames["myiframe"]
doc=frame.document.body
obj=frame.document.getElementById(id)
if(doc.scrollTop <= obj.offsetTop-scrollSteps){
frame.scrollBy(0,scrollSteps)
timer=setTimeout("scrollWin('"+id+"')",10)
if(doc.scrollTop>(doc.scrollHeight-doc.clientHeight)-scrollSteps){ // if bottom of page reached before anchor point
clearTimeout(timer)
doc.scrollTop=doc.scrollHeight-doc.clientHeight
}
}
else{
if(doc.scrollTop >= obj.offsetTop+scrollSteps){
frame.scrollBy(0,-scrollSteps)
timer=setTimeout("scrollWin('"+id+"')",10)
}
else{
clearTimeout(timer)
doc.scrollTop=obj.offsetTop
}
}
}
function toTop(){
clearTimeout(timer)
if(window.frames["myiframe"].document.body.scrollTop >= scrollSteps){
window.frames["myiframe"].scrollBy(0,-scrollSteps)
timer=setTimeout("toTop()",10)
}
else{
clearTimeout(timer)
window.frames["myiframe"].document.body.scrollTop=0
}
}
// -->
</script>
<center>
<div id="iframelinks"> </div>
<P>
<iframe id="myiframe" name="myiframe" src="iframepage.htm" width="500" height="400" scrolling="yes"></iframe>
</center>
iframepage.htm example page.
<HTML>
<HEAD>
<TITLE>iframe_anchor_scroll</TITLE>
<script type="text/javascript">
function createLinks(){
parent.document.getElementById("iframelinks").innerHTML=
'<a href="#null" onclick="scrollWin(\'anchor1\')">Anchor 1</a> '
+'<a href="#null" onclick="scrollWin(\'anchor2\')">Anchor 2</a> '
+'<a href="#null" onclick="scrollWin(\'anchor3\')">Anchor 3</a> '
+'<a href="#null" onclick="scrollWin(\'anchor4\')">Anchor 4</a> '
+'<a href="#null" onclick="scrollWin(\'anchor5\')">Anchor 5</a> '
+'<a href="#null" onclick="toTop()">Scroll to Top</a> '
}
function clearLinks(){
parent.document.getElementById("iframelinks").innerHTML=""
}
</script>
<style>
body{margin:0}
</style>
</HEAD>
<BODY onload="createLinks()" onunload=" clearLinks()">
<div id="anchor1">Anchor 1</div>
<P>An anchor point is created using a div
<P><div id="anchor1"> </div>
<P>The links are coded into a function in this page which writes the links to the parent page onload
<P><a href="#null" onclick="parent.scrollWin('anchor2')">To Anchor 2</a>
<br><br><br>
<a href="#null" class="totop" onclick="parent.toTop()">Scroll to Top</a>
<br><br>
<div id="anchor2">Anchor 2</div>
<P>Links can also be coded into this page, an example would be
<P><a href="#null" onclick="parent.scrollWin('anchor1')">To Anchor 1</a>
<P>Note the reference to the parent
<P><a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor1')">To Anchor 1</a><br>
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor3')">To Anchor 3</a>
<br><br>
<a href="#null" class="totop" onclick="parent.toTop()">Scroll to Top</a>
<br><br>
<div id="anchor3">Anchor 3</div>
<P>You can also scroll back to the top of the page.
<br><br><br><br><br><br>
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor2')">To Anchor 2</a><br>
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor4')">To Anchor 4</a>
<br><br>
<a href="#null" class="totop" onclick="parent.toTop()">Scroll to Top</a>
<br><br><br>
<div id="anchor4">Anchor 4</div>
<br><br><br><br><br>
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor3')">To Anchor 3</a><br>
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor5')">To Anchor 5</a>
<br><br><br><br>
<a href="#null" class="totop" onclick="parent.toTop()">Scroll to Top</a>
<br><br>
<div id="anchor5">Anchor 5</div>
<div class="scroll_link">
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor1')">To Anchor 1</a><br>
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor2')">To Anchor 2</a><br>
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor3')">To Anchor 3</a><br>
<a href="#null" class="scroll_link" onclick="parent.scrollWin('anchor4')">To Anchor 4</a><br>
<br><br>
<a href="#null" class="totop" onclick="parent.toTop()">Scroll to Top</a>
<br><br>
</BODY>
</HTML>
When the parent page opens, the document in the iframe is scroll to the selected anchor.
Depending on which link you select denotes at which anchor point the iframes document is loaded at.
<a href="parent_page.htm?anchor1">Anchor 1</a>
<a href="parent_page.htm?anchor2">Anchor 2</a>
<a href="parent_page.htm?anchor3">Anchor 3</a>
<a href="parent_page.htm?anchor4">Anchor 4</a>
<a href="parent_page.htm?anchor5">Anchor 5</a>