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.

Problem

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.

Solution

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:

body 
{
margin: 0px;
padding: 0px;
}

HTML example :

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

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.

Example:

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

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