Using BODY ID As A Back To Top Page Anchor : Kinky Solutions : A Student's Perspective by Ben Nadel

Using BODY ID As A Back To Top Page Anchor

Posted July 11, 2007 at 10:35 AM

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 »

<a name="top"></a>

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 »

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Body ID For Top Anchor Demo</title>
</head>
<body id="top">
<h1>
This Is My Demo
</h1>
<p style="margin-bottom: 3000px ;">
This paragraph has a huge ass bottom margin
so that the page will definitely scoll and
put the following link below the page fold.
</p>
<p>
<!--
This link will jump back up to the ID:top in
the document. Since that is the ID of the body
tag, this link will jump to the top of the page.
-->
<a href="#top">Back To Top</a>
</p>
</body>
</html>

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

Warning: Don't Stick Your iPhone In The Blender

Sandra Clark Rocked My World

ColdFusion Jobs - Find or Post A ColdFusion Job Through DeveloperCircuit.com

Reader Comments

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