HTML Anchor point to go top of the page & link within the page: creating FAQ page

SQL PHP HTML JavaScript articles and free code

Linking within the page and go to top html code

We have seen how to link different pages. Here we will see how to link different areas of the same page. This is used to build a FAQ page. On clicking the links at the top we can move to different areas of the same page and we will also see how to provide a link saying BACK TO TOP to go to or return to top of the page.

To move to different sections of the same page we will name the area of that page or we can call it anchor point. Here is how the area will be marked with a name using <a tag.

<a name=last>This is last part of the page</a>

When ever we click to reach this part of the page, this link will be at our top of the page. To link this part of the page we will use the above name to tell the browser to move to that portion. Here is the code.

<a href='#last'>Last part</a>

You can see this will link to last part area of the page. After clicking the link saying Last part we can jump to the Last part of the page. Here you can see links to move to different part of the page and you can return to top by clicking the Back to top link.

This is top of my page, go to Middle \| Last part \| End
This is middle of the page	Back to top
This is last part of the page	Back to top
This is end of the page	Back to top

Here is the html code for this page

<table border='0' width='100%' cellspacing='0' cellpadding='0'>
<tr> <tr><td> This is top of my page, go to
<a href='#middle'>Middle</a> | <a href='#last'>Last part</a> |
<a href='#end'>End</a> </td><td> </td></tr> <tr><td><a name=middle>This is middle of the page</a> 
 </td><td align=right valign=top><a href='#TOP'>Back to top</a></td></tr> <tr><td><a name=last>This is last part of the page</a>
 
 </td><td align=right valign=top><a href='#TOP'>Back to top</a></td></tr> <tr><td><a name=end>This is end of the page</a> 
 </td><td align=right valign=top>
<a href='#TOP'> Back to top</a></td></tr> </table>

Discuss this tutorial at forum

List of HTML Tutorials

Links and CSS