Back To Top Link Functionality

An anchor is placed just inside the body tag on every page in Perfect Layout. That anchor has the id of "top" and can be referred to anywhere on the page. By clicking a hyperlink addressed to "#top", the user's browser will show the top of the page, thus, a "back to top" link. The single space character " " is to make sure that the reference works in all browsers by giving a consistant object to reach. The css positioning to absolute is there to prevent the space character from pushing the rest of the page down by the amount of the line-height. Go to a long page to try out the top links, located in the footer of each page.


Relevant HTML

<!-- Top anchor. -->
<div><a id="top">&#160;</a></div>

<!-- Later in the page. -->
<p><a href="#top">Top</a></p>

Relevant CSS

#top
{
	position:absolute;
}

« Back to Functionality Index