Scroll Up!

Scroll to Top of Page Script

This page is complete; just save it and follow the instructions.

Features:

 

 Make Your Pages Scroll in Five Steps

1. It is important that your page contain a valid doctype before the <html> tag.

Microsoft's Internet Explorer cannot process this script properly without a vaild doctype. 
For more information on doctypes go to www.w3.org/QA/2002/04/valid-dtd-list.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll to Top of Page</title>

2. The page can be linked to a CSS file, or the following style tag can be added to the head section of the page.

<style type="text/css">
#up_ {
background-color: yellow;
position: fixed; /* fixes arrow in bottom, right corner of screen */
bottom: 25px;
right: 25px;
filter: alpha(opacity=0); /* for Internet Explorer */
opacity: 0.0; /* W3C standard */
cursor: pointer
}
</style>

3. This javascript can be left in the header, or cut and pasted into a separate javascript file.

<script type="text/javascript">

var Up=
{

distance:350, // scroll distance till 'scroll up' appears
appear:20, // speed opacity changes
time:20, // speed (lower number is faster)
frames:75,
stpUp:25, // adjusts acceleration
stpDwn:36.8, // adjusts deceleration

// don't touch from here down
upTimer:0,
opcty:0,
up1:0,
up2:0,

scroll_page: function(){
if (navigator.appName=='Microsoft Internet Explorer') IE=true
else IE=false
document.getElementById('up_').onclick=Up.scrollUp
Up.poll()
},

poll: function(){
if(IE==true){
if(document.documentElement.scrollTop>Up.distance) Up.fade(1)
else Up.fade(0)
}
else{
if(window.pageYOffset>Up.distance)Up.fade(1)
else Up.fade(0)
}
up_timer=setTimeout('Up.poll()',100)
},

fade: function(a){
if(a==1){
if(Up.opcty<.9){
Up.opcty+=.05
window.clearTimeout(Up.up2)
Up.up1=setTimeout('Up.fade(1)',25)}
else Up.opcty=1
}
else {
if(Up.opcty>.1){
Up.opcty-=.05
window.clearTimeout(Up.up1)
Up.up2=setTimeout('Up.fade(0)',25)}
else Up.opcty=0
}
if (IE==true) document.getElementById("up_").filters[0].opacity=Up.opcty*100
else document.getElementById("up_").style.opacity=Up.opcty
},

scrollUp: function(){
t_f=Up.time/Up.frames
if (IE==true)scrllP=document.documentElement.scrollTop
else scrllP=window.pageYOffset
step=scrllP/Up.frames
sU=step/Up.stpUp
sD=step/Up.stpDwn
move=3
window.clearTimeout(Up.upTimer)
Up.scroll_(step,scrllP,scrllP,sU,sD)
},

scroll_: function(stp,cP,sP,sU,sD){
prcnt=cP/sP
if(prcnt>=.25){
move+=sU
if(move>stp)move=stp}
if(prcnt<.25){move-=sD
if(move<2.5)move=2}
cP-=move
if (cP>0){
window.scrollTo(0,cP)
Up.upTimer=setTimeout('Up.scroll_('+stp+','+cP+','+sP+','+sU+','+sD+')',Up.time)}
else window.scrollTo(0,0)
cP=0; sU=0; sD=0; stp=0
}
}
</script>

</head>

4. Add the following attribute to the body tag to initialize script.

<body onload="scroll_page()" >

5. Add the following code in the body section of the file for 'scroll up' icon.

<p id="up_">Scroll Up!</p>

Or, if you prefer an up arrow, you can make this a link to an image file.

<img id="up_" src="../images/up.GIF" alt="Scroll Up" >

 

If you found this script useful, please consider giving credit or placing a link to  www.the-Gospel.org

I hope this script works to your satisfaction.

  1. Extra text to give page something to scroll
  2. Extra text to give page something to scroll
  3. Extra text to give page something to scroll
  4. Extra text to give page something to scroll
  5. Extra text to give page something to scroll
  6. Extra text to give page something to scroll
  7. Extra text to give page something to scroll
  8. Extra text to give page something to scroll
  9. Extra text to give page something to scroll
  10. Extra text to give page something to scroll
  11. Extra text to give page something to scroll
  12. Extra text to give page something to scroll
  13. Extra text to give page something to scroll
  14. Extra text to give page something to scroll
  15. Extra text to give page something to scroll
  16. Extra text to give page something to scroll

</body>
</html>