nightdrops.com

Sometime i see around websites made just by one page. One really long page which contains all the information and offers some method to navigate up and down.

There are many ways to accomplish this, flash or javascript based; i’m going to talk about the latter, because is kinda easy to learn, and permits me to use non destructive javascript.

Non destructive javascript it is a tecnique to use javascript which don’t rely on javascript for modifying the basic content and structure of the page (so that can be viewed also fully with javascript disabled). What we do, for example, is to use js to hook the anchor links and slightly redirect their behaviour; if you turn off js they remain working anchor links.

I’m going to use jQuery, i really love this little library :-)

So let’s start planning!

The planning phase

What we have is a really really long html page, on which we need to move up and down. Let’s say a lot of paragraphs filled with lorem ipsum. We want to scroll up and down really smootly from one link to another, and we want a menu that follow us while moving on the page.

In this tutorial i’ll explain the scroll aspects, in the next i’ll talk about the moving menu.

The basic html structure

What we expect to have is a menu with voices that leads to some specific areas in the page. In the simplest form we can use html link that points to some anchors, in the form

that will bring you to somewhere in the page where is an emelent with that id.

This is an example of the basic html structure.
I’ve added some css rules to semplify what follow, but nothing special.

Adding the fun

But that page is boring, everybody wants a funny scroll!

So we introduce the jQuery library in the project. We include the jQuery javascript in the head tag, and at the bottom of the page we prepare a place for our script to go.

Wait. At the bottom of the page? Yes. Just before the </body> closing tab. Why? Because the Yahoo Exceptional Performance team said so, to not block parallel downloads, and these are good practise to follow (also because IE6 sometimes tend to mess up with the $(document).ready() ).

Now googling around i foun that the html element to animate, to scroll the page, differs from firefox and explorer and safari. You’ll never guessed eh?
We have to find which one is the right element. A rapid test consist to scroll down both ‘html’ and ‘body’ and then find out which one has moved. (Of course this goes in the $(document).ready() handler);
Let’s see:

So now we have to override the default link behaviour. But only in the case links are to id in the page. We can easily select them with the *= operator (that means ‘contains’ ).
We also need to know where to scroll:  for an <a> element, the ‘hash’ property tells the references element; $(this.hash) is the jQuery wrap to that element in the page. We can easily find his y position by reading the offset() method.

The event.preventDefault() method inhibits the default link behaviour.

Tadaaa! Every link to an id now scrolls smoothly. Notice that i’ve subtracted 200 pixel from the y position, because i don’t like the linked element on the top of the browser viewport (so i scroll 200pixel before).

This the example. Soon the following part, where we will animate the menu!