Skip to main content
Ben Nadel at cf.Objective() 2009 (Minneapolis, MN) with: Kurt Wiersma
Ben Nadel at cf.Objective() 2009 (Minneapolis, MN) with: Kurt Wiersma

Using BODY ID As A Back To Top Page Anchor

By
Published in Comments (30)

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.

Want to use code from this post? Check out the license.

Reader Comments

15,883 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.

3 Comments

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>

15,883 Comments

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

43 Comments

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

3 Comments

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

2 Comments

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

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

1 Comments

u can either use "name" and there wont be any troubles with margins, but transitional doctype doesnt validate that : [

1 Comments

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!

1 Comments

Your body id trick just solved my problem with IE8 and Firefox reading differently my back-to-top solution.

Thank you.

1 Comments

This is a really great tip. i tried sever ones suggested by other websites before which turned to be failures.This one works greatly!!!

1 Comments

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!

2 Comments

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?

1 Comments

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.

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

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

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel