We’re here to help! Email us here.

Tutorials

loading...

Tutorial: Creating HTML Anchor Links

So, you want to make a page with jumps such as Jump to Top? This can be done with HTML anchor links which are created with anchor tags.

Please read through these instructions carefully. The first example will show you how to create a Jump to Top link from the bottom of your page, and the second example will show you how to create a link which will take the user from the top of the page, to another specific area on the page.

Step 1: Creating the link

  1. Drag and drop the HTML Code Widget onto your page where you would like your visitor to click. For this example it will be the bottom of the page.
  2. Enter this code in the HTML Code Widget: <a href="#Top">Jump to Top</a>

What this bit of code is saying is: Top is the specific place on the page I want to jump, and Jump to Top is the text I want the link to display.

Step 2: Marking the Spot

  1. Drag and drop the HTML Code Widget onto your page where you would like the link created in Step 1 to take your visitor. For this example it is the top of the page.
  2. Enter this code in the HTML Code Widget: <a name="Top"></a>

What this bit of code is saying is: Here is the place named Top, and a link with this place specified needs to go here.

Keep in mind that Top and Jump to Top are arbitrary. You could create a link that would go to Center or to a specific topic on a page called News.

Let's do one more example. Say you want a user to be able to jump from the top of your page to a specific area halfway down the page which discusses News.

Step 1: Creating the link

  1. Drag and drop the HTML Code Widget onto your page where you would like the text to appear. For this example it will be at the top of the page.
  2. Enter this code in the HTML Code Widget: <a href="#News">Read Current News Stories</a>

What this bit of code is saying is: News is the specific place on the page I want to jump, and Read Current News Stories is the text I want the link to display.

Step 2: Marking the Spot

  1. Drag and drop the HTML Code Widget onto your page where you would like the link created in Step 1 to take your visitor. For this example it would be wherever the News section of the document is.
  2. Enter this code in the HTML Code Widget: <a name="News"></a>

What this bit of code is saying is: Here is the place named News, and a link with this place specified needs to go here.

Give these HTML anchor link examples a try and you will see that you can easily have your visitors jump all over your page!