сейчас на сайте:
Лучшие сказки мира
Детектив и фантастика
Песни прошлых лет
Для досуга
смотреть оглавлениепримерразмер кода
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>