Tuesday, July 08, 2008

Start of the Page Navigation

Where pages are very long, like a list of events or news items, we might want a way to quickly move back the top of the page.

You will have seen ‘back to the Top’ or some such phrase used on web sites. I have always hated seeing that phrse, because ‘top’ doesn’t really make a lot of sense. Words lke this just distract from the real content.

There are often times, though that pages become very long when lots of items (like in a blog) are listed, and it really does help if there is a quick way to get back to the navigation and menus etc.

Here is what I am doing on a few sites.

furthermore...

First off we need a place to repeat the link down the page, and I would suggest near to the heading for an item.In ExpressionEngine this would be simply repeated in the entry. Rather than use the dreaded words 'back to the top', better to be a bit more subtle and use an up-arrow like this: ↑

I did think of creating a graphic, but really this just causes more complexity and problems with CSS. Here follows the repeated element:

<div class='go_up'>
<a title='go back up to the top of the page' href='#wrapper' \>
&uarr;</a>
</div>

How does this work in ExpressionEngine?

Rather than simply repeat within the entries, we can add a neat feature where the links only start happening further down the page. Why would you want to go to the start of the page if you are already there? By using the {count} variable we can decide where to start using the link:

{ if count > 2}
{embed="includes/.go-up"}
{ /if}

What about the CSS that we need?

Well suite yourself but here is what I have:

    .go_up {
    float: right;
    width: 20px;
    }
    #content .go_up img {
    border: none;
    background: transparent;
    }
    #content .go_up a {
    border: none;
    }

Icing on the Cake - so to speak

With Prototype and script.aculo.us installed you can also add a nice effect. By invoking the 'ScrollTo' effect, we can make the movement to the start of the page a smooth one. Here is the code:

<div class='go_up'>
<a title='go back up to the top of the page' href='#wrapper' onclick="new Effect.ScrollTo('wrapper', {offset: -24}); return false;" \>
&uarr;</a>
</div>

You can see this in use here.

Don't forget the Print

One more thing to remember; you don't want this arrow to print when someone does decide that they need a copy of your glorious page on paper. Make sure you have a print style sheet and add the following:

    .go_up {
    display: none;
    }