You are here: Home / Computer / Internet / Web Site / CSS Tricks / Top of Page

Top of page

Here we describe some tricks to resolve the return to top of page problems you may encounter.


You encounter a problem with the top of page command. Under some situations, the page will not go back 100% to the top of your page when you use an anchor like #top which is located right after <body>.

This is rather annoying for the perfectionist.


The solution is simple, in the CSS rules body and html, you have to do at least one of the following: the upper margin, or the upper padding has to be 0 pixel.

CSS example:

margin: 0px;
padding: 0px;

HTML example :

<a name="top" class="anchor"> </a>
<a href="#top">Top of Page ;</a>

For developers without CSS, make a ref:# type link (no need for an anchor).

<a href="#">Top of Page ;</a>

Solution 2

Whichever your CSS , we will use a script for the return to the top of page. This is inserted directly into the link spot in the html code.


<a href="javascript:;" onclick="document.documentElement.scrollTop = 0;" >
<img src="Images" alt="" width="25" height="25" title="Top of page" />

The javascript:; code can be a bit incoherent but it will not generate a top of page error.