jQuery 1.4 Animation Techniques - Index of

Download from Wow! eBook
Full Page Animations
Save the HTML file again and run it in a browser. You should find that the document
smoothly scrolls to the desired location when any of the top links on the page are clicked.
What just happened?
First we set some variables including a reference to the DOM node of the parent container
(the ). We obtain this with the raw JavaScript getElementById() function so
that we can pass it into a jQuery selector as a context for the selector.
Doing this is great for performance and means that we don't have to give multiple elements
id attributes for the sole purpose of jQuery element selection. Everything is selected by
starting at the parent that is originally selected from the document.
We also set a variable called speed which we'll use when we create the simulated
animation. This is the figure that the current scroll amount is incremented by, so lower
values will mean a longer "animation" time and higher values will mean a shorter time,
completely the opposite of jQuery's duration argument.
We also cache a selector for the window object as we'll need to refer to this several
times, often from within for or while conditional branches, so again this is purely
for performance reasons.
We then set a click handler on the table of contents links. Within this function we first stop
the browser from following the link using the preventDefault() method, which jQuery
normalizes across all common browsers.
We then set some more variables, first getting the target element of the link that was
clicked, then storing its current offset, and the maximum scroll amount of the document.
We also initialize a newScroll variable so that we can calculate what the new scroll amount
should be.
We then use a JavaScript while loop to incrementally scroll the document, using the speed
variable that we set earlier. The condition of the loop is that it should continue while the
newScroll variable is less than the top offset of the target element and while the current
scroll is less than the maximum scroll.
The offset of the target element is obtained using jQuery's offset() method, which returns
an object with top and left properties that correspond to the element's position relative
to the document. The maximum scroll is obtained using standard JavaScript to query the
scrollHeight property of the document body.
The current scroll is normalized by jQuery so that the scrollTop() method returns the
current position of the vertical scroll bar. This is useful because it means that we don't
have to feature-detect the browser and obtain the value using either document.body.
scrollTop or window.pageYOffset depending on the browser in use.
[ 184 ]