HTML: "To Top"-link made perfect

12
Nov

In order to optimize the usability of your web project you may use the famous “To top”-link – a link at the bottom (or at the end of an article) of your page that scrolls to the very top of the website. To the very top? Usually, the top link jumps to the anchor position but this can’t be placed at the very top of your website. There will always be a header/logo above your top link anchor. But with a small trick, it’s quite easy to make the link jump the topmost position of your website.
The position of the link anchor in HTML-code should be like this:

...
</head>

<body>
<a name="top" id="top"></a>
...

This should always be the code for your top link anchor. Now, you just have to add a small CSS-modification to your HTML-code or your CSS-file. The code is:

#top {
    position:absolute;
    top:0px;
}

That’s all. Now, your top link will move the scroll position to the topmost position of your HTML page.

Article postedPosted in @ 11/12/08

Comments