א"ב בבנית אתרים

Auto scroll

You need to copy this script into the <HEAD> of the page. I'll explain everything below.

<SCRIPT LANGUAGE="JavaScript">
<!--

var pos = 0;
var end = 1500;
var Defaultspeed = 4;
var speed = Defaultspeed;
var scrollOn = (window.scroll) ? true : false;
var Stop = true;

function NewSpeed(amount)
{
speed += amount;
if (Stop) startScroll();
if (!speed) Stop = true;
}

function StartStop()
{
Stop = (Stop) ? false : true;
if (!Stop) startScroll()
}

// -->
</SCRIPT>

Then the links. In the example they are in another frame, so we first go there as explained in the Introduction to frames.

<A HREF="javascript:parent.main.NewSpeed(-4)">Slow scroll</A> |
<A HREF="javascript:parent.main.StartStop()">Start/Stop scroll</A> |
<A HREF="javascript:parent.main.NewSpeed(4)">Speed scroll</A>

ExplanationIn
this explanation I'll list some of the changes you can make. However, it's quite probable that you want something else. In that case, you'll need to tweak the script by yourself.

VariablesWe start by setting some variables:

var pos = 0;

pos: The position of the page. This number gives the position (from the top, in pixels) the page should scroll to. When the page scrolls, pos is constantly updated. The usual begin is the top of the page (pos = 0).

var end = 1500;

end: The total length of the page, in pixels. When pos reaches end the scrolling stops.
When you have put all HTML in the page, set this variable by trial and error. Both setting it too high and setting it too low results in behaviour that looks like a strange bug. I'll try to find some way to detect the length of the page.

var Defaultspeed = 4;

Defaultspeed: The default speed of the page. Set this one at some intermediate value; the user can always speed up or slow down the page.

var speed = Defaultspeed;

speed: The actual speed of the page. Initially this is the same as Defaultspeed, but the user can influence this variable.

var scrollOn = (window.scroll) ? true : false;

scrollOn: is true when the browser can handle auto scrolling, is false when the browser can't. In the last case, the main script is not executed, because it would only produce errors.

var Stop = true;

Stop: is true when the user has stopped the scrolling, is false when the page is scrolling. Initially we set it to true.

The scrolling functionfunction scrollWindow()
{

if (scrollOn && !Stop)
{

Now the actual scrolling function. First we check whether the browser can handle scrolling (scrollOn = true) and whether the user has not stopped the scrolling (Stop = false). Only when both these requirements are met do we allow the script to be executed.

pos += speed;

Add speed to pos, so that pos is the new vertical coordinate.

window.scroll(0,pos);

Command the browser to scroll to position 0,pos, 0 pixels from the left of the page, pos pixels from the top of the page.

if (pos < 0)
{

If for some reason pos has become smaller than zero (the page has scrolled to the very top),

pos = 0;

pos is set to zero,

speed = -speed;

the speed is reversed

Stop = true;
}

and the scrolling is stopped. Thus, when the page scrolls all the way up to the beginning, it stops there and waits for user input.

else if (pos > end)
{
pos = end - 1;
speed = -speed;
Stop = true;
}

Same thing if pos becomes larger than end. The scrolling has reached the bottom of the page, so the speed is reversed and the scrolling is stopped.

Of course, you yourself should decide exactly what happens in these two cases. I reverse the speed, but maybe you want to set it to 0. Or you want the page to jump to the top (pos = 0) or the bottom (pos = end). Or you want the scrolling to proceed with reversed speed (leave out Stop = true).

setTimeout('scrollWindow()', 100)
}
}

Execute this function again in 100 milliseconds. Thus, the function keeps repeating itself until Stop becomes true.

The other functions influence pos, speed and Stop. When the user changes one of those variables, ScrollWindow() will react the next time it is executed.

Starting the scrollfunction startScroll()
{

This function starts the auto scrolling.

First we need to find out at what position the page is now and puts this value in pos. This is for the case when the user scrolls the page manually, then (re)starts the auto scrolling script. Then the scrolling should start at the point where the page is at that moment, and not at the point where the auto scroll was stopped.

Of course, the code for this is browser specific.

if (window.innerHeight)
{
pos = window.pageYOffset
}

Code for Netscape 4+.

else if (document.body)
{
pos = document.body.scrollTop
}

Code for Explorer 4+.

Unfortunately this part of the script does not work in Netscape 3. If the user scrolls manually, then restarts the auto scroll, the page starts scrolling at the point where the auto scroll has previously stopped.

if (!speed) speed = Defaultspeed;

If speed is 0, make it Defaultspeed.

Stop = false;

Set Stop to false, because we start scrolling now.

scrollWindow();
}

Start scrollWindow(). It will keep on repeating itself until Stop becomes true.

Maybe you want to always set the speed to Defaultspeed when the auto scroll starts. In that case, change the speed line to:

speed = Defaultspeed;

Changing the speedfunction NewSpeed(amount)
{

This is the function that is called by the Slow Scroll and Speed Scroll links. The link hands the increase in speed to this function. In this example, Speed Scroll is NewSpeed(4) (increase speed by 4 pixels per scroll) and Slow Speed is NewSpeed(-4) (decrease speed by 4 pixels per scroll).

Of course, you'll need to decide by what amount the speed is changed and put it in the links. Or maybe you want to allow the user to set it for himself through a form or something like that.

speed += amount;

Add amount to speed.

if (Stop) startScroll();

If the scrolling is currently stopped, start it again.

You should leave the line above out if you don't want the scrolling to restart if someone clicks on the Speed buttons.

if (!speed) Stop = true;
}

If speed becomes zero make Stop = true. If you don't do this, the user sees no scrolling but when he clicks on Start Scroll, nothing appears to happen: he sets Stop to true, but interaction logic declares that the scrolling should start again and Stop should become false. Setting it to true immediately evades all these problems.

Another question: do you want to allow upward scrolling? If you don't, add the line:

if (speed < 0) speed = 0;

to the function directly behind speed += amount;, so that if speed becomes negative, it is set to 0 (you can also set it to Defaultspeed or something else still). If you do this, you can also remove the if (pos < 0) {etc.} bit from scrollWindow(), because the page will never scroll upwards and thus pos will never become less than zero.

Toggle Start/Stopfunction StartStop()
{

This function is for the Start/Stop toggle button.

Stop = (Stop) ? false : true;

Reverse Stop, so that from true it becomes false and vice versa.

if (!Stop) startScroll()
}

If Stop has become false, start the scrolling.

Of course, you can also make two separate buttons. In this case the Start button should call StartScroll() directly and you should make a function Halt() for the Stop button (don't call the function Stop, because we already use that name):

function Halt()
{
Stop = true;
}

Starting the auto scrollIn this example the auto scroll starts when the user first clicks the Start/Stop scroll link.

You can also make the scroll start when the page is completely loaded. Then you do:

When the page is very long, the loading may take quite a while and the auto scroll may begin too late. In that case it's better to put the onLoad above in an image, so that when that image (say, the third on the page) is completely loaded the auto scroll starts. This keeps a nice balance between starting too early and starting too late (this trick: courtesy of Walter de Rijk).

I advise you not to start the scroll immediately (by putting the command StartScroll() in the JavaScript). After all, the page may be slow in coming through which causes the auto scroll to behave very strangely.