Ask and Answer

How To Create A Javascript Scroll Bar, A scroll bar for your webpage using javascript

May 8th, 2007, Javascript, General, admin,  Print This Post

In this tutorial I will show you how to create two buttons in the bottom left of the screen (Website) that, when hovered over, will scroll the page.

Now to start with, we must create a our buttons, the first line will create a div element, or block. Using blocks you can position items anywhere on a page. We use the ID property just to let us know what the block is used for, as for the first block, its obvious that it contains the vertical buttons and the second two blocks contains the horizontal buttons.
The style property of the div tag tells the browser how to draw it, in the first block we set it to fixed, which keeps the block in one place on the window, then we follow it with coordinates, 10 pixels from the right and 10 pixels from the bottom.
Same goes with our seconds block except it is 60 pixels from the right.
Now we use anchor tags so we can use the mouseover feature, so when the mouse moves over each image the image can change our speed variable that scrolls our screen. We also use the mouseout property to stop the screen from scrolling when we leave the image.

Below is our first few lines of code.

CODE
<div id=”verticalbuttons” style=”position: fixed; right:10px; bottom:10px;”>
<a onmouseover=”ycurrentscrollspeed=-staticscrollspeed” onmouseout=”ycurrentscrollspeed=0″><img
src=”up_arrow.gif” border=”0″></a>
<a onmouseover=”ycurrentscrollspeed=staticscrollspeed” onmouseout=”ycurrentscrollspeed=0″><img
src=”down_arrow.gif” border=”0″></a>
</div>

Note: you can roposition the buttons by changing cooridinates. Below I will split the block into two instead of one for both buttons. The left button will be all the way on the left site of the screen on the bottom, while the right will be at the right side of the screen on the bottom. If you wanted to put the buttons at the top instead you could change “bottom:10px” to “top:10px” so it will be 10 pixels from the top or however many pixels you want it from the top/bottom or where ever.

CODE
<div id=”leftbutton” style=”position: fixed; right:60px; bottom:10px;”>
<a onmouseover=”xcurrentscrollspeed=-staticscrollspeed” onmouseout=”xcurrentscrollspeed=0″><img
src=”left_arrow.gif” border=”0″></a>
</div>
<div id=”rightbutton” style=”position: fixed; left: 10px; bottom:10px”>
<a onmouseover=”xcurrentscrollspeed=staticscrollspeed” onmouseout=”xcurrentscrollspeed=0″><img
src=”right_arrow.gif” border=”0″></a>
</div>

Now we start our script and initialize our variables. The first variable is static and doesn’t change, we use this to define how fast we want our page to scroll, you may change the speed if desired.
The other two variables are used to keep track of the current speed of scrolling on the x and y axiis, (x axis is left-right, y axis is up-down). We set these to zero because we don’t want to be scrolling when the user loads the page.
CODE
<script>
var staticscrollspeed=3 //Enter scroll speed in integer (Advised: 1-3)
var xcurrentscrollspeed=0
var ycurrentscrollspeed=0

our next function will do the actual scrolling. We scroll using the function “scrollBy”. The first argument is the speed on the x axis to scroll and the second is the speed on the y axis. We, of course, fill these arguments with our speed variables for each axis.

Then last, but not least, we set an interval to call our scroll function every 20 milliseconds.

CODE
function scroll(){
window.scrollBy(xcurrentscrollspeed,ycurrentscrollspeed)
}
setInterval(”scroll()”,20)
</script>

I hope you enjoyed the tutorial and found it helpful!

del.icio.us Digg it Earthlink Furl iFeedReaders ma.gnolia Maple.nu Netvouz Netscape RawSugar reddit Scuttle Shadows Simpy Spurl StumbleUpon Wink Yahoo MyWeb

Leave a reply