Traditionally, I think a lot of people use a named Anchor tag to create a "Back To Top" page anchor:
Launch code in new window » Download code as text file »
I know that I've done that. But, it always felt a bit ganky to me. I mean, the first element in your page is a useless link? That just feels wrong, doesn't it?
Just recently, I found out that you can refer to element IDs rather than named anchors to create page anchors links. This is a really cool piece of information that can easily be applied to the "Back to Top" page anchor links. Now, instead of having these silly, useless links, we can put an ID in the XHTML BODY tag and then use that as our back to top target:
Launch code in new window » Download code as text file »
As you can see here, our XHTML BODY tag as the ID "top." Then, our link at the bottom of the document uses a hash that points to that ID. Clicking on it will act in the same way as a named anchor tag would have, scrolling the user back up to the top of the page. The only minor note here is that the scrolling takes body margins into account. Meaning, if your body has a 10 pixel top margin, the window will jump to a 10 pixel offset since technically, the body is not at the zero offset.
Anyway, this just occurred to me last night and I think it results in much cleaner, more syntactically informative mark-up.
Download Code Snippet ZIP File
Comments (12) | Post Comment | Ask Ben | Permalink | Other Searches | Print Page
Just move your 'id="top"' to the <html> tag and you won't have to worry about the margins either
Posted by fooey on Jul 11, 2007 at 11:57 AM
Oh snap! I didn't even think of that. HTML doesn't occur to me as a rendered document element, so I didn't think it would be possible to jump to it. Thanks for the tip.
Posted by Ben Nadel on Jul 11, 2007 at 12:00 PM
Great tip. I didn't know you could do that, but it's so much more elegant.
Posted by Rob Wilkerson on Jul 11, 2007 at 12:43 PM
You may also use just a hash sign in href attribute for "back to top" link and you don't need to bother with ID's. I.e. <a href="#">back to top</a>
Posted by Jura Khrapunov on Jul 11, 2007 at 1:08 PM
@Jura,
While that works, I am not sure if that is a feature of the language? Or a general standard that browsers seem to employ.
Posted by Ben Nadel on Jul 11, 2007 at 1:14 PM
More to the point, is it adjusting the scroll value or is it reloading the entire page and you end up at the top of the page by default. I thought it was doing a complete reload (albeit from cache in many cases).
Posted by Rob Wilkerson on Jul 11, 2007 at 1:18 PM
Using the Hash should NOT reload the page. Just jumping around.
Posted by Ben Nadel on Jul 11, 2007 at 1:33 PM
2 Ben:
It's not the feature per se but default behaviour for most browsers I know - if the anchor name could not be found browser just scrolling page up to the top
Posted by Jura Khrapunov on Jul 13, 2007 at 4:38 AM
Unfortunately this doesn' seem to work in IE7. :(
Posted by Cal on Jul 20, 2007 at 12:40 PM
Typical. It seems to be a HTML 4 standard:
http://www.w3.org/TR/html401/struct/links.html#h-12.2.3
It also appears to be part of the XHTML standard:
http://www.w3.org/TR/2003/WD-xhtml2-20030506/mod-attribute-collections.html#adef_attribute-collections_id
... so who knows :(
Posted by Ben Nadel on Jul 20, 2007 at 12:52 PM
I have just spent AGES trying to fix this problem - you're a lift saver!!!
:):):):):):):):):):):):):):)
Posted by Sam on Oct 9, 2008 at 1:17 AM
and you save lives too :)
Posted by Sam on Oct 9, 2008 at 1:18 AM