Anchor Link to Top of Page

HTML & CSS
1

I want a link that takes user to the top of the page they’re on. I’ve looked at how other sites do this and they all seem to be placing an <a> tag just after the opening <body> tag to achieve this effect. Is this the only way this can be done? Is there know universal keyword that works cross browser? Unfortunately just using a # in the href attribute doesn’t take the user to the top of the page in all browsers (works in firefox for example, but not IE).

Can anyone shed some light on this?

Cheers

2

If you have an id on the first tag after the body tag then you can target that - for example

<body><div id=“content”>

<a href=“Content”>

3

Well yeah, that’s what I was referring to in my original post. That seems to be the only solution, I was just wondering if maybe a lesser known keyword or possibly a workaround existed which would take a user to the top of a page without referencing an id associated with an element.

4

I’m curious why you don’t want to use the conventional method.

5

I will if I have to, I was just looking for a better way if one existed.

6

This is just a random thought, but I suppose you could use a script that would return the scroll position top to 0. Ask about it in the js forum.

7

Most web pages these days should have an id at or very close to the top of the page that you can link to easily without having to add anything specific to create the anchor point.

8

I use felgall’s method. For JavaScript methods take a look at these two that I have in my bookmarks

http://jdstiles.com/java/scrollers/statistopofpage.html - a sliding arrow follows you down the page.

http://javascript.internet.com/navigation/top-of-page.html - only displays if page exceeds browser height.

9

Well yeah, that’s what I was referring to in my original post. That seems to be the only solution, I was just wondering if maybe a lesser known keyword or possibly a workaround existed which would take a user to the top of a page without referencing an id associated with an element.

The link or id method is safer-- unfortunately re-loading the page often forces people back to the top of the page. This sucks using JAWS because if you’re on one of those silly AJAX pages where stuff gets updated and reloaded all the time, you keep getting sent back up to the top of the page.

People also have their own keyboard shortcuts to the tops and bottoms of the page and you wouldn’t want to interfere with those either.

Plus with a link you can explicitly warn people: “this will take you back to the top of the page!” Getting jerked up unexpectedly to the top of the page is disorienting enough (like target=“blank” opening new windows unexpectedly).

10

Believe it or not, I’m starting to use an unordered list with an ID of “top” in my pages. That list contains two to three links - links that skip to the menu, content, sidebar, comments, or whatever (depending on the type of site). And yes, I do put this above the header (and use floats/margins to slide it into position).

11

heh Dan you mean like Mike has here at Lainey Feingold’s site?

I’ve started using them too, and making them appear on active/focus is also great, for the keyboarders who don’t have Opera and are perfectly sighted. I usually give it a class or id called “access”. It’s a very nice idea-- tab through that page! : )