HTML - Anchor Tag

Top | Bottom

It is possible to jump between different places on the same web page by using the HTML Anchor tag <a...></a> in combination with the 'name' element and making a link to the '#name'. This can be done in Sandvox Pro by editing the Raw HTML. Unfortunately, there is not an easy drag-and-drop way to do this that I know of. It is something that needs to be done using HTML editing.

For example, if I create a list of questions, I can create a link to each answer and  insert a corresponding named anchor tag in front of the answer. The below four questions were typed in then copied and pasted back into this page using in Sandvox Pro:
 Edit > Paste HTML in Text

Once the page is published the links work.

<a name="top"></a><strong>Anchor Tag in Sandvox</strong>

<p>1. What is the does the Anchor link look like?  
<a href ="#a1">Answer 1</a></p>

<p>2. What does the Name option look like?  
<a href="#a2">Answer 2</a></p>

<p>3. How do I jump back to the top of the page?  
<a href="#a3">Answer 3</a></p>

<p>4. How do I jump to the bottom of the page?  
<a href="#a4">Answer 4</a></p>

Then in front of where you want to jump to, paste the HTML:

<a name="a1"></a> Answer 1. The anchor... or

<a name="top"></a> Anchor Tag in Sandvox... or

<a name="bottom"></a> (at the bottom of the page).

The unique names (e.g. "a1") can be any word.


Anchor Tag in Sandvox

1. What does the Anchor Link look like? Answer 1

2. What does the Anchor Name option look like? Answer 2

3. How do I jump back to the top of the page? Answer 3

4. How do I jump to the bottom of the page? Answer 4

061-kaleidoscope

<a href ="#a1">Answer 1</a>

Answer 1. The anchor LINK is <a href ="#a1">Answer 1</a> . The word 'Answer 1' becomes the link and it jumps to the anchor reference named. This referenced named is the anchor name with the hash (#) symbol in front of the name inside double quotation marks.

Top


<a name="a2"></a>

Answer 2. The anchor NAME is <a name="a2"></a>. I type my unique anchor name tag. I copy (cut) the anchor name tag. I insert my cursor at the start of the word that the name tag refers to and click in Sandvox Pro:
Edit > Paste HTML in Text

The anchor name can be wrapped around any words e.g. <a name="a2">Answer 2.</a> but I find it easier in Sandvox to paste the HTML tag in front of the word e.g. <a name="a2"></a>Answer 2 

Top


Answer 3. At the top of the page paste the HTML for the anchor NAME
<a name="top"></a>
... then at the bottom of the page, I paste the HTML LINK to the top of the page name:
<a href="#top">Top</a>

Top


Answer 4. At the top of the page paste the HTML LINK to the bottom of the page name:
<a href="#bottom">Bottom</a>
... then at the bottom of the page paste the HTML for the anchor NAME:
<a name="bottom"></a>

TopBottom


Top | Bottom


Powered by Sandvox | Web hosting by A2 Hosting | Site by Neil Boyd cc by-nc-sa 2010