jQuery 1.4 Animation Techniques - Index of

[ 193 ]
Chapter 7
As the screenshot shows, the page still works and the site can be navigated with JavaScript
disabled. Some of our styling is added with JavaScript (via class name additions), so the final
page will appear slightly differently.
What just happened?
The underlying HTML is fairly straight-forward and just represents a simple collection of
example elements including header and footer navigation. The styles are also very light and
are there mostly just to lay out the example pages. The rules at the bottom of the file are for
elements or classes that are added dynamically by the script.
The previous screenshot shows how the page will appear to those with scripting disabled,
although it is very similar to how the page will appear once we've added the script, which
we'll do next.
Time for action – adding the scroll navigation
In this section we will add the code that will enable animated scrolling.
1. In another new file in your text editor, add the following code (it should go into a
empty function which aliases the $ character, the same as in the other examples):
$("#content").empty();
var win = $(window),
links = $("header nav a"),
content = $("#content"),
positions = {},