Scrolling Examples

All the following scripts go in the HEAD section of the parent page

A manual scroll effect
Mouseover a link to scroll, Mouseout to stop, Mousedown to increase scroll rate


Up Down 

<script type="text/javascript">
<!--
scrollPos = 0
speed=1
scrollMe=""

function scrollDown() {
clearTimeout(scrollMe)
scrollPos +=speed
window.frames["frame1_name"].scrollTo(0,scrollPos)
scrollMe=setTimeout("scrollDown()",50)
if(scrollPos>window.frames["frame1_name"].document.body.scrollHeight - (parseInt(document.getElementById("frame1_id").style.height)-10)){

scrollPos=window.frames["frame1_name"].document.body.scrollHeight - (parseInt(document.getElementById("frame1_id").style.height)-10) 
clearTimeout(scrollMe)

}

}

function scrollUp() {
clearTimeout(scrollMe)
scrollPos -=speed
window.frames["frame1_name"].scrollTo(0,scrollPos)
scrollMe=setTimeout("scrollUp()",50)

if(scrollPos<speed){
scrollPos=0
clearTimeout(scrollMe)
}

}

function stopMe(){
clearTimeout(scrollMe)
}

// -->
</script>

<iframe name="frame1_name" id="frame1_id" src="page1.htm" scrolling="no" frameborder="yes" style="height:100px"></iframe><BR> <a href="#null" onmouseover="scrollUp()" onmousedown="scrollUp(speed=5)" onmouseup="scrollUp(speed=1)" onmouseout="stopMe()">Up</a> <a href="#null" onmouseover="scrollDown()" onmousedown="scrollDown(speed=5)" onmouseup="scrollDown(speed=1)" onmouseout="stopMe()">Down</a>

Auto Scroll
Scrolls to bottom of page and back to top again


Start 

<script type="text/javascript">
<!--

scrollPos = 0
scrollMe=""

function scrollDown() {
clearTimeout(scrollMe)
scrollPos += 2
window.frames["frame_name"].scrollTo(0,scrollPos);
scrollMe=setTimeout("scrollDown()",50)
if(scrollPos>window.frames["frame_name"].document.body.scrollHeight - (parseInt(document.getElementById("frame_id").style.height)-20)){ 
clearTimeout(scrollMe)
scrollUp()
}
}

function scrollUp() {
clearTimeout(scrollMe)
scrollPos -= 6
window.frames["frame_name"].scrollTo(0,scrollPos);
scrollMe=setTimeout("scrollUp()",50)
if(scrollPos<0){
clearTimeout(scrollMe)
scrollDown()
}
}

function stopMe(){
clearTimeout(scrollMe)
}

// -->
</script>

<iframe name="frame_name" id="frame_id" src="page.htm1" scrolling="no" frameborder="no" style="height:100px"></iframe><BR> <a href="#null" onclick="scrollDown()">Start</a>

Auto Page Scroll
Scrolls multiple pages, mouseover the iframe to pause, mouseout to resume


Stop Start

The first page to be scrolled is set as the Iframes default src.
Additional pages are placed in the "next_page" array within the script, the default page is also included as the last element inthe array 

<script type="text/javascript">
<!--

next_page=new Array()
next_page[0]="page2.htm"
next_page[1]="page3.htm"
next_page[2]="page1.htm"

count=-1
scrollPos=0
scrollMe=""
function scrollDown() {
clearTimeout(scrollMe)
scrollPos += 1

window.frames["frame_name"].scrollTo(0,scrollPos);
scrollMe=setTimeout("scrollDown()",50)

if(scrollPos>window.frames["frame_name"].document.body.scrollHeight){
clearTimeout(scrollMe)
count++
if(count>next_page.length-1){
count=0
}
setTimeout("document.getElementById('frame_id').src=next_page[count] ",3000)
scrollPos=0
}

}

function stopMe(){
clearTimeout(scrollMe)
}

// -->
</script>

<iframe name="frame_name" id="frame_id" src="page1.htm" scrolling="no" frameborder="no" style="width:400px;height:100px;border:1px solid red" onload="scrollDown()"></iframe><BR>
<a href="#null" onclick="stopMe()">Stop</a> <a href="#null" onclick="scrollDown()">Start</a>