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 at right side.
This is top of my page, go to ( click the links below )

Middle part | Last part | End part














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> <br><br><br><br><br><br><br><br><
br><br><br><br><br><br><br> </td><td> </td></tr> <tr><td><a name=middle>This is middle of the page</a> <br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> </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>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> </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> <br><br><br><br><br><br><br><br>
<br><br><br><br><br><br> </td><td align=right valign=top>
<a href='#TOP'> Back to top</a></td></tr> </table>

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    vijay

    03-08-2013

    Thank You for this article. Your site is nice and easy to understand for learners like me...! thank you.

    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer