Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at cf.Objective() 2009 (Minneapolis, MN) with:

Using BODY ID As A Back To Top Page Anchor

By Ben Nadel on
Tags: HTML / CSS

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.

Tweet This Groovy post by @BenNadel - Using BODY ID As A Back To Top Page Anchor Thanks my man — you rock the party that rocks the body!


Reader Comments

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.

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).

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

I have just spent AGES trying to fix this problem - you're a lift saver!!!

:):):):):):):):):):):):):):)

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.

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 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!

Hi. I'd like to get the link to reach the top of the comments section. I've tried some things but it keeps going to the top of the page. Any ideas?

I am currently using Joomla 3.0+ and wanted to use this method to "Back to the Top" a few anchored pages. However in the Administrator back end of Joomla, you don't have immediate access to the <body> tag. With a little digging, I found that the body tag already has an ID associated with it- it is "rt-page-surround" . By replacing "#top" with "#rt-page-surround" in the example give by author, anywhere that you want to place a "Back to the Top" link, you will do fine (don't forget the # mark). Thanks for this method.

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.

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.