17Slow scrolling

Slow scrolling

Slow scrolling is the first of the jQuery effects that we are going to look at, it is one of the easiest to understand and to implement.

Slow scrolling is an animated technique for scrolling to a particular point on the same web page.

The browser visibly scrolls to the specified point as if you were scrolling down the page with the middle mouse button (at least that how scrolling works with Windows, on a Mac you probably have to cross your fingers, turn round three times and spit), it starts off fast and slows down as it approaches the target. The time it takes to get there can be specified.

I think it is a nice effect.

You will already have experienced it in using the website, but just to be sure, click the following link; it will open the 99-00-typicals page in a new tab:


Now click link to a point on the same page (in section 99.3 of the TOC), the browser will slow scroll to that point, it takes exactly one second to get there.

If you now (manually) scroll to the end of that section, you will see a link to figure 99.1:

Figure 17.1 - Link to a figure on the same page
Figure 17.1   Link to a figure on the same page

If you click that link, the browser will again slow scroll down to figure 99.1, it will stop scrolling when the image is at the top of the screen. Again it gets there in one second.

Read on to see how I do this.

End flourish image