Jumping Inside Pages


So, You Want Page Jumps?

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. In essence, they are nothing but links to places on a page. Click on them and they will take you to the top or bottom of the page. Page jumps can be very useful on very long pages of information, and can the added SEO value of allowing links to part of your page to appear on Google Before you continue with this tutorial, please take a look at the “How to Add Links to HTML” 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.

<center>
<a href=”#Top”>Top</a>
&nbsp;|&nbsp;
<a href=”#Bot”>Bottom</a>
</center>

      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.


Would you like Sagapixel to work for you?

Related Posts

html lists

Making Lists in HTML

Unordered Lists or Bulleted Lists:       There are several different types of lists which can be made with HTML. Whether your

Read More »
Call Now Button