Using BODY ID As A Back To Top Page Anchor
Posted July 11, 2007 at 10:35 AM by Ben Nadel
Traditionally, I think a lot of people use a named Anchor tag to create a "Back To Top" page anchor:
- <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:
- <!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>
-
- <!-- NOTICE: ID in Body Tag. -->
- <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.
Reader Comments
Just move your 'id="top"' to the <html> tag and you won't have to worry about the margins either
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.
Great tip. I didn't know you could do that, but it's so much more elegant.
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>
@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.
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).
Using the Hash should NOT reload the page. Just jumping around.
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
Unfortunately this doesn' seem to work in IE7. :(
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 :(
I have just spent AGES trying to fix this problem - you're a lift saver!!!
:):):):):):):):):):):):):):)
and you save lives too :)
u can either use "name" and there wont be any troubles with margins, but transitional doctype doesnt validate that : [
Thanks so much for posting this great information. To solve the IE issue, I just hid my named anchor DIV from it, which is fine because I highly encourage my viewers to switch to a standards compliant browser anyway.
Thank you, thank you, thank you!
Your body id trick just solved my problem with IE8 and Firefox reading differently my back-to-top solution.
Thank you.
For a better solution (but with no IE6 support) try this:
http://agyuku.net/2009/05/back-to-top-link-using-jquery/
@Giovanni,
Yeah, jQuery can do some nice stuff.
Guys,
Thanks so much for this solution! I'm greatly indebted to you!
This is a really great tip. i tried sever ones suggested by other websites before which turned to be failures.This one works greatly!!!
Thanks for that. Works great:) I'm gonna use this in my 2nd ever web project. Hope my teacher will approve. Will let u know.
This is a fantastic way of fixing pages not going all the way back to the top - thanks
Thanks for your post! I too felt awkward having a floating anchor tag. Took the advice of one of your commenters and added it to the html tag instead. Ahhhh so much better!
Thank you so much! So simple, and it gets rid of annoying floating anchors. Yay! =D
