Anchors Scroll

Rather than just going directly to an anchor in a page the following script scrolls the page.
Click a link to scroll the page to the relevant anchor point and click a Scroll To Top link to scroll back to the top of the page.

You can scroll up or down depending on where you put the anchor and link in your page.
You can also add Scroll to Top links simply by calling function toTop()

The basics for using this script are simple, place the anchor tag in your page giving it a NAME as well as an ID, create your link as you would a normal anchor link adding onclick=" return scrollWin(this.href)" to the link opening tag.

Although the script will work with any tag in the interests of backward compatability it is best to use the standard named anchor tag.

Anchor Point 1

<a name="anchor1" id="anchor1">

<h3>Anchor Point 1</h3>

<a href="anchor_scroll.htm#anchor4" onclick=" return scrollWin(this.href)">Scroll To Anchor Point 4</a>

<a href="anchor_scroll.htm" onclick=" return toTop()">Scroll To Top</a>

Anchor Point 2

<a name="anchor2" id="anchor2">

<h3>Anchor Point 2</h3>

<a href="anchor_scroll.htm#anchor3" onclick=" return scrollWin(this.href)">Scroll To Anchor Point 3</a>

<a href="anchor_scroll.htm" onclick=" return toTop()">Scroll To Top</a>

Anchor Point 3

<a name="anchor3" id="anchor3">

<h3>Anchor Point 3</h3>

<a href="anchor_scroll.htm" onclick=" return toTop()">Scroll To Top</a>

Anchor Point 4

<a name="anchor4" id="anchor4">

<h3>Anchor Point 4</h3>

<a href="anchor_scroll.htm#anchor2" onclick=" return scrollWin(this.href)">Scroll To Anchor Point 2</a>

<a href="anchor_scroll.htm" onclick=" return toTop()">Scroll To Top</a>

You can change the scroll speed at variable scrollSteps.

<script type="text/javascript">

<!--
scrollSteps = 10
timer=""

function scrollWin(anchorID){
id=anchorID.substring(anchorID.indexOf("#")+1,anchorID.length)
clearTimeout(timer)
if(document.body.scrollTop <= document.getElementById(id).offsetTop-scrollSteps){
window.scrollBy(0,scrollSteps)
timer=setTimeout("scrollWin('"+id+"')",10)

// if bottom of page reached before anchor point
if(document.body.scrollTop>(document.body.scrollHeight-document.body.clientHeight)-scrollSteps){
clearTimeout(timer)
document.body.scrollTop=document.body.scrollHeight-document.body.clientHeight
}

}
else{

if(document.body.scrollTop >= document.getElementById(id).offsetTop+scrollSteps){
window.scrollBy(0,-scrollSteps)
timer=setTimeout("scrollWin('"+id+"')",10)
}
else{
clearTimeout(timer)
document.body.scrollTop=document.getElementById(id).offsetTop
}

}

return false

}

function toTop(){
clearTimeout(timer)
if(document.body.scrollTop >= scrollSteps){
window.scrollBy(0,-scrollSteps)
timer=setTimeout("toTop()",10)
}
else{
clearTimeout(timer)
document.body.scrollTop=0
}

return false

}

// -->
</script>

<a name="name1" id="name1">Anchor</a>
<a href="anchor_scroll.htm#name1" onclick=" return scrollWin(this.href)">Scroll to Anchor</a>
<a href="anchor_scroll.htm" onclick=" return toTop()">Scroll To Top</a>