Auto scroller

Before you try making the autoscroll bar, you should know the basics of JavaScript and HTML


The div that contains the "Auto Scroll Bar"

1. First of all we create a div and give it the id "scrollBarControl". Just to make it easyer to locate it later.
2. Inside we need 3 images. One for scrolling upwards in the text "speedUp()" and one for scrolling downwards in the text "speedDown()" and last but between the two other buttons a button to stop scrolling. "speedStop()".

<div id="scrollBarControl">         <img src="up.png" title="Scroll up" onclick="speedUp()" />         <br />         <img src="stop.png" title="Stop scroll" onclick="speedStop()" />         <br />         <img src="down.png" title="Scroll down" onclick="speedDown()" />     </div>

 

Then we need to add some style to the button images

I think the styles bellow is as simple as they can be. So i won't explain them further. (:
Just that "#scrollBarControl img" means every img tag inside the #scrollBarControl.

#scrollBarControl   {       z-index:1000;       position:fixed;       border:solid 1px red;       text-align:center;   }           #scrollBarControl img   {       cursor:pointer;   }

 

Now for the javascript behind this.

1. First of all. Go get some coffey.  :o)
2. And then to start with, we need two create variables
3. Then we create a interval timer and last the click functions for our buttons

Bellow is a snippet of the two variables. One for how fast the autoscroller will be scrolling. And one for the position of the y-scrollbar.
 

var actScrollSpeed = 0; var actScroll = 0;

 

Now for the interval timer

This function does a lot of things very fast!

1. The function checks if the actual speed value is not = 0.
2. If it is = 0 then it dosen't activate the scroller
3. else it will find out where the scrollbar is right now by using the value of the variable actScroll and add the value of the actScrollSpeed to the actScroll value. And then scroll to that position
4. Then if the variable actScroll is less than 0, actScroll will again be 0. That way it never scrolls over the top of the website.
5. And if the variable actScroll is = more than the maximum value of the y scroll of the website, then it will again be set to the maximum scroll value. That way it never scrolls further down than the page is.
6. And as you can see in the example bellow, then there is a value right after the "}(end of the function)" like this "}, 1". That means that this interval timer will run one time for each 1/1000 of a second.
7. So just to clear things up. Every 1/1000 of a second it will add the "actScrollSpeed value" to the "actScroll value" and scroll to that position. And keeb doing that until the actScrollSpeed is set to 0. unless one of the if statements is true. Then is sets the value to that.

setInterval(function () {        if (actScrollSpeed != 0) {            actScroll = actScroll + actScrollSpeed;            scroll(0, actScroll);            if (actScroll < 0) {                actScroll = 0;            }            if (actScroll > document.body.parentNode.scrollHeight – window.innerHeight) {                actScroll = document.body.parentNode.scrollHeight - window.innerHeight;            }        } }, 1);

 

 

Now let's move on to the "onclick" functions for the buttons.

Bellow is three functions "speedDown(),  speedUp(), speedStop()"

1. speedDown() finds the actual scroll position and ads it to the actScroll variable that we created earlier. Then checks if the actScrollSpeed is bellow 0 and therefore scrolling upwards, if it is, it sets the actScrollSpeed to 0 and then updates it to be 0,1. If it is above 0 it will just ad 0,1 so that it end up being the actual value plus 0,1.  That way you can keeb adding more and more speed to the scroller by clicking more than once on the same button but it resets when you click on the other button
2. speedUp() does the same as the one above. Just in the opposite way.
3. SpeedStop() sets the actScrollSPeed to 0.

function speedDown() {     actScroll = document.documentElement.scrollTop;     if (actScrollSpeed < 0) {         actScrollSpeed = 0;     }     actScrollSpeed = actScrollSpeed + 0.1; } function speedUp() {     actScroll = document.documentElement.scrollTop;     if (actScrollSpeed > 0) {         actScrollSpeed = 0;     }     actScrollSpeed = actScrollSpeed - 0.1; } function speedStop() {     actScrollSpeed = 0; }

 

 

Congratulations you have now made your own autoscroller   :o)

If you want to modify the design, then just change the images for the buttons (:
You can allso modify how much speed the scroller will add after each click on the buttons. Just change one of the statements bellow to something like 0,2 og 0,5

actScrollSpeed = actScrollSpeed + 0.1; actScrollSpeed = actScrollSpeed - 0.1;