Time for action – creating the page that will scroll and its styling

The example page needs to be quite long for the scroll effect to work. The underlying HTML used could be any modern blog post.

  1. Add the following code to the <body> of the template file:
    <article id="post"> <header id="top"> <h1>A long article with lots of sections</h1> <nav> <ul> <li><a href="#section1" title="Section 1">Section 1</a></li> <li><a href="#section2" title="Section 2">Section 2</a></li> <li><a href="#section3" title="Section 3">Section 3</a></li> <li><a href="#section4" title="Section 4">Section 4</a></li> <li><a href="#section5" title="Section 5">Section 5</a></li> </ul> </nav> <p>Posted on <time datetime="2010-11-13">13 November 2010</time> by Dan Wellman</p> </header> ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.