HTML Tutorials

Jumping Inside Pages

So, you want Page Jumps?
HTML Tutorials
By Jeffrey J. Walters

Top  |  Bottom

      So, you want to make a page with jumps? For those who are not familiar with page jumps, you can create "jumps" or links to different places on a page. For example I have created a "Top" and "Bottom" page jump at the top and bottom of this page. They are nothing but links to places on this page. Click on them and they will take you to the top or bottom of this page. Page jumps can be very useful on very long pages of information. Before you continue with this tutorial, please take a look at the Making Links Tutorial if you are not familiar with links.

Making the Jump (or Link):

      There are two parts to creating page jumps. First there is the jump or link. It's created much like you would create any link. You can link either text or graphics. For this page I created links using text. The code for this page is shown below.

<a href="#Top">Top</a>
<a href="#Bot">Bottom</a>

      There are two page links, <a href="...">, in the code above. Notice that the "#" (Pound) symbol was used here. This is very important, don't forget it! <center> and </center> tags were used to center everything nicely. Also, notice the use of the &nbsp; tags which were used to create the proper spacing between the links. The "|" (bar) symbol was placed in there for looks. For more on the & command see The "&" Command Tutorial.

Marking the Spot:

      Ok, that was the first part; the link. Now, we need to mark the spot on the page to jump to. We do that with the <a name="..."> tag or statement. These tags will be placed where ever you want the page to jump to. The "Top" and "Bot" tags are shown below. These were placed at the top and bottom of my page.

<a name="Top">

<a name="Bot">

      Notice that the NAME tags used have to match up with the links shown earlier in this tutorial. Also, notice that in this case no "#" (Pound) symbol was used. Note that the use of "Top" and "Bot" was completely arbitrary. You can use what ever words you would like, just keep in mind that they are case sensitive. "Top" is different than "top". I hope this helps and have fun.

Link to this Tutorial!

Did you find this tutorial helpful? If so, please help me to share it with others by linking to it. Just place the HTML code below onto your own Web page to create a link to this tutorial.

Bookmark this Tutorial!

Bookmark this tutorial page on your favorite Social Bookmarking site.

[ Page Created December 12, 1997 ] [ Last Updated May 24, 2008 ]
Copyright ©1997-2019 Jeffrey J. Walters. All rights reserved.