jQuery 1.4 Animation Techniques - Index of

[ 185 ]
Chapter 7
Within the while loop, we use jQuery's scrollTop() method in setter mode to set
the scroll to the value of the newScroll variable, and then increment the newScroll
value using our speed variable. This is what I meant by spoofing the animated scroll—the
document just scrolls sequentially in a series of jumps; it isn't actually animated, but because
it happens fairly rapidly it gives the impression of being animated.
After the click handler for the table of contents links, we also set a click handler on the
back to top links. Because we're just going straight back to the top of the page, we don't
need to do any complex calculations, so this function is really just a simplified version of
the first function.
There is already a jQuery plugin that can be used to animate scroll: the scrollTo
plugin. This plugin allows us to easily animate both vertical and horizontal scroll
on any element whose contents overflows the dimensions set on it.
However, as an exercise in how to fake animation without using any of jQuery's
animation methods, I thought it would be of value to do it ourselves manually
here. We'll use the plugin later in the chapter. For reference it was created by
Ariel Flesler and can be downloaded from http://flesler.blogspot.
com/2007/10/jqueryscrollto.html.
Pop quiz – animating page scroll
1. In this example we used old-school JavaScript to obtain a reference to the
DOM node instead of using jQuery. Why?
a. Because it's easier
b. Because it's fun to mix things up a little
c. Because it's faster to give jQuery selectors a DOM node context so that the
entire document doesn't need to be searched when selecting elements from
the page
d. Because it makes the byte count of the page smaller
2. Why can we not use jQuery to animate the page scroll?
a. Because scrollTop (or window.pageYOffset) are properties of the
document or window and not CSS style properties
b. Because the values for these properties are not true integers
c. Because jQuery does not want us to animate scroll
d. We can, we just chose to do it this way instead