Javascript Scroll Bar A scroll bar for your webpage using javascript

[t3jem 0]

In this tutorial I will show you how to create two buttons in the bottom left of the screen 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.

<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.

<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.

<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.

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

I hope you enjoyed the tutorial and found it helpful!

if you have any questions/comments, feel free to private message me.
Edited April 7, 2007 by t3jem (see edit history)

[zak92 0]

nice on you helped me you shall get youre creds soon.Question: How can i make the position of the pics move? For example i want the up button to go on top and down on bottom and same with sideways.

Edited April 7, 2007 by zak92 (see edit history)

[t3jem 0]

Question: How can i make the position of the pics move? For example i want the up button to go on top and down on bottom and same with sideways.

Alright, I just edited the top part of the code. If you want to put the up button at the top of the screen you change the style from "position: fixed; right: 10px; bottom: 10px;" to "position: fixed; right: 10px; top: 10px;" so instead of being 10 pixels from the bottom it will be 10 pixels from the top. Also you can change the pixels to percents/other units and you can also change how much space there is from the edges of the screen, just remember "bottom" is space from the bottom, top is space from the top, left and right are space from the left and right respectively.

Glad you enjoyed my tutorial

[Unholy Prayer 0]

That's a pretty good code, man. Nice work. I might use it.

[zak92 0]

Not exactly. I wanted to have the up arrow on the top and the bottom arrow completely out at the bottom. Help. Thanks

[t3jem 0]

ok, if you wanted to split the up and down arrows just do it just like the left/right arrows, here's the code for it.

<div id="topbutton" style="position: fixed; right:10px; top:10px;">  <a onmouseover="ycurrentscrollspeed=-staticscrollspeed" onmouseout="ycurrentscrollspeed=0"><img  src="up_arrow.gif" border="0"></a></div><div id="bottombutton" style="position: fixed; right: 10px; bottom:10px">  <a onmouseover="ycurrentscrollspeed=staticscrollspeed" onmouseout="ycurrentscrollspeed=0"><img  src="down_arrow.gif" border="0"></a>  </div>

just splite the block, and change the position.

[zak92 0]

you know what man i reallly love you. Thanks a lot. I hope you got your creds by now!

[anish 0]

Thanks for sharing

[zak92 0]

Hey maybe since its time you should post like more advanced version maybe including a bar to keep track of where you are . Great job though.

[viettre 0]

this tut nice thanks for share

[the-stand 0]

nice tutorial :lol:im using something called flexscroll at the moment and it works like a charm

[rize619 0]

good idear for frameset scroll barwill it work there in frames ?

[jsjs 0]

hi there
if you want try somethig different try this javascript scrollbar
it works perfectly in all browsers and its easy to set up.
also support multy scrollbars on 1 page

[hippiman 0]

I don't think this works in IE, but I don't really care because I hate IE.It works perfectly for me. That's pretty cool.