jQuery 1.4 Animation Techniques - Index of

[ 183 ]
Chapter 7
What just happened?
The HTML is very simple. There's just more of it than there has been in previous examples.
It represents a single article that is divided into different sections, with each section having a
sub-heading and some layout text.
A table of contents style navigation menu at the top of the article (this would be considered
a secondary nav) links to each of the different sections. The styling is also very basic and
simply sets some rules to lay out the page in a clean format.
Time for action – animating the scroll
The script itself is relatively straight-forward too. Add the following code to the empty
function at the bottom of the HTML file:
var parent = document.getElementById("post"),
speed = 7,
win = $(window);
$("nav a", parent).click(function(e) {
e.preventDefault();
var target = $(this).attr("href"),
offset = $(target).offset(),
newScroll = 0,
maxScroll = document.body.scrollHeight;
}
});
while (newScroll < offset.top && win.scrollTop() < maxScroll) {
win.scrollTop(newScroll);
newScroll = newScroll + speed;
$(".top", parent).click(function(e) {
}
});
e.preventDefault;
var newScroll = win.scrollTop();
while (newScroll > 0 && win.scrollTop() > 0) {
win.scrollTop(newScroll);
newScroll = newScroll - speed;