Anchors Scroll Div

To anchor 1 To anchor 2 To anchor 3 To anchor 4 To anchor 5 Scroll to Top

Anchor 1



You can put the links in or out of the div

To anchor 2




Scroll to Top


Anchor 2



You can put in a link to scroll up to an anchor as well as down.

To anchor 1




Scroll to Top


Anchor 3



You can also include links to scroll back to the top of the div






Scroll to Top


Anchor 4



This works in IE6, Mozilla, Firefox, and NS7

To anchor 2




Scroll to Top


Anchor 5

The script also detects if there is not sufficient room at the end of the contents to allow the last anchor to be scrolled to the top position and stops the scrolling once the end of the contents is reached.

To anchor 1

The contents of the scrolling div are contained within the div with the id scrolling_div
To set up your anchor points simply give an element an ID and use a link containing onclick="scrollDiv('id')", where id is the id you have used for that anchor.

To use the scroll to top function simply use a link containing onclick="toTop()". 

<HTML>

<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

scrollSteps = 10
timer=""

function scrollDiv(id){
clearTimeout(timer)
scrollingDiv=document.getElementById("scrolling_div")

if(document.defaultView && document.defaultView.getComputedStyle(scrollingDiv, '').getPropertyValue("position")!="absolute"){
browserOffset=scrollingDiv.offsetTop
}
else{
browserOffset=0
}

if(scrollingDiv.scrollTop <= document.getElementById(id).offsetTop-scrollSteps-browserOffset){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop+scrollSteps
timer=setTimeout("scrollDiv('"+id+"')",10)

// if bottom of page reached before anchor point
if(scrollingDiv.scrollTop>(scrollingDiv.scrollHeight-scrollingDiv.offsetHeight)-scrollSteps){
clearTimeout(timer)
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollHeight-scrollingDiv.offsetHeight
}

}
else{

if(scrollingDiv.scrollTop >= document.getElementById(id).offsetTop+scrollSteps-browserOffset){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop-scrollSteps
timer=setTimeout("scrollDiv('"+id+"')",10)
}
else{
clearTimeout(timer)
scrollingDiv.scrollTop=document.getElementById(id).offsetTop-browserOffset
}

}

}

function toTop(){
scrollingDiv=document.getElementById("scrolling_div")
clearTimeout(timer)
if(scrollingDiv.scrollTop >= scrollSteps){
scrollingDiv.scrollTop=document.getElementById("scrolling_div").scrollTop-scrollSteps
timer=setTimeout("toTop()",10)
}
else{
clearTimeout(timer)
scrollingDiv.scrollTop=0
}

}

</script>

</HEAD>
<BODY>

<P>
<DIV id="scrolling_div" style="width:500px; height:300px;padding:5px;border:2px solid #000000;overflow:auto;text-align:left"> 
<div id="dv1" style="background-color:#AFA">
Anchor 1
<br><br><br><br>
You can put the links in or out of the div<br><br>
<a href="#null" onclick="scrollDiv('dv2')">To anchor 2</a>
<br><br><br><br><br><br><br><br>
<div style="text-align:right"><a href="#null" onclick="toTop()">Scroll to Top</a></div>
</div>

<div id="dv2" style="background-color:#FFA">
Anchor 2
<br><br><br><br>
You can put in a link to scroll up to an anchor as well as down.<br><br>
<a href="#null" onclick="scrollDiv('dv1')">To anchor 1</a>
<br><br><br><br><br><br><br><br>
<div style="text-align:right"><a href="#null" onclick="toTop()">Scroll to Top</a></div>
</div>

<div id="dv3" style="background-color:#FAA">
Anchor 3
<br><br><br><br>
You can also include links to scroll back to the top of the div<br><br>
<br><br><br><br><br><br><br><br>
<div style="text-align:right"><a href="#null" onclick="toTop()">Scroll to Top</a></div>
</div>

<div id="dv4" style="background-color:#AAF">
Anchor 4
<br><br><br><br>
This works in IE6, Mozilla, and Firefox but not in NS7<br><br>
<a href="#null" onclick="scrollDiv('dv2')">To anchor 2</a>
<br><br><br><br><br><br><br><br>
<div style="text-align:right"><a href="#null" onclick="toTop()">Scroll to Top</a></div>
</div>

<div id="dv5" style="background-color:#FAF">
Anchor 5
<br><br>
The script also detects if there is not sufficient room at the end of the contents to allow the last anchor to be scrolled to the top position and stops the scrolling once the end of the contents is reached.<br><br> 
<a href="#null" onclick="scrollDiv('dv1')">To anchor 1</a>
<br><br>
<div style="text-align:right"><a href="#null" onclick="toTop()">Scroll to Top</a></div>
</div>

</DIV>
</center>

</BODY>
</HTML>