Jump To (Top/Bottom) Of Page(CB)

[Former Member]

Adds floating customizable clicky arrows at the top of the page that jump to the top/bottom of page when clicked.

Live Preview
(Look in the top left corner of page the link above sends you to.)

Features:

• Has 2 sets of pre-made arrow images with transparent backgrounds. (black/white)
  
• Option to set the side of the page that the arrows will be displayed on
  
• Option to use custom images
  
• Option to add a line between arrows.
  

Editing Required

• In the top half of the footer section of the code there are simple detailed options.
  
• You will need to style the arrows via the style sheet

HINT:
The arrow images parent element is a div with the id "#jump div".
Using CSS you can edit the background color or choose to have it transparent.

Global Header
<style type="text/css">
/*Jump Page Stylesheet*/
/*Global Headers*/
#jump_div
{
position: fixed;
   _position: absolute;
   _top: expression( ignoreMe=-0+document.body.scrollTop+"px");
   top:0;
border: 1px solid white;
}
#arrows_hr
/*The width should be the same as your image width if using a custom image*/
{
width:10px;
}
</style>
<!--==Start 'Jump To (Top/Bottom) of Page' DIV==-->
<!--=======Placement:Global Header========-->
<!--=========No Editing Required==========-->
<div id= "jump_div" title="Click down to jump to bottom of page and up to jump to top.">
<img id="up" src="" onclick="pagejumpup()"/><br id="brk">
<img id="down" onclick="pagejumpdown()"/></div>
<!--===End 'Jump To (Top/Bottom) of Page' DIV===-->


Global Footer:
<script type="text/javascript">
//Jump To (Top/Bottom) of Page
//Global Footer
//Coded By Game

var image_choice="white" //Choose a preset image(black or white. To use a custom image leave set at "" and add image urls below)

var custom_image_top= "arrowtopURL"
var custom_image_bottom= "arrowbottomURL"

display_side= "left" //choose which side of the page arrows will appear(left/right)

var add_hr= "yes" //Add line between arrows ("yes" or leave blank "" for no)
//Change the styles of the line by using CSS with the id "arrows_hr"

//I recommend you upload your own copies of the 4 black/white preset arrow images below
var Wtoparrow="http://i1157./p595/Gamethefirst/arrowupwhite.png";
var Wbotarrow="http://i1157./p595/Gamethefirst/arrowdownwhite.png";
var Btoparrow="http://i1157./p595/Gamethefirst/arrowupblack.png";
var Bbotarrow="http://i1157./p595/Gamethefirst/arrowdownblack.png";

//No Editing Required below
var up=document.getElementById("up");var down=document.getElementById("down");var br=document.getElementById("brk");var jumpdiv=document.getElementById("jump_div");var x=document.body.scrollHeight;var y=document.body.clientHeight;var hr=document.createElement("hr");hr.id="arrows_hr"
if(image_choice=="black"){up.src=Btoparrow;down.src=Bbotarrow;}
if(image_choice=="white"){up.src=Wtoparrow;down.src=Wbotarrow;}
if(image_choice==""){up.src=custom_image_top;down.src=custom_image_bottom;}
if(display_side=="left"){jumpdiv.style.left="0";}if(display_side=="right"){jumpdiv.style.right="0";}
if(add_hr=="yes"){br.parentNode.replaceChild(hr, br);}
function pagejumpdown(){if(x>y){
bottomofpage=x-y;window.scrollTo(0,bottomofpage)}}
function  pagejumpup(){window.scrollTo(0,0);}
</script>

Enjoy