Jumplinks, examples for website pages and posts
This method can be used for writing html pages or in WordPress.
Jumplinks are links from one part of a page to another part in the same page. The links are made by naming the destination and then linking to the name from somewhere else in the same page. A common example you may have seen are links that go back to the top of the page.
Jumplinks within the text
Jumplists
List Example
In wordpress, it is easier to make the jumping link if you FIRST make the a names. You can do this by using the tool 'code' in the text editor and between the two parts, type in #Thename like this:
<code>#Thename</code>
Then just type in #Thename in the hyperlink tool in visual mode.
Making the a-names first makes that bit easy.
<p><a href="#Jumplinks">Jumplinks</a><br />
<a name="Jumplinks"></a> (this is an empty link that I put above each heading)
Jumplinks within the text
For jumplinks within the text, you might want to use names.
If I want to link to a paragraph, I find the paragraph code <p></p> and put the name link between them:
<p><a name="yourpararef"></a>The paragraph content here.</p>
You can also do it using id, like this:
<p id="yourpararefid">The paragraph content here</p>
Jumplists
For Jumplists, you can use numbers, but you need to keep track of the order.
I find it helpful to make my headings first, make the jumplinks and then add the content afterwards.
TIP. An outline with headings is quite a good process for writing an article quickly anyway.
List Example:
Contents - put the headings as a contents list (this is a Jumplist)
number1
number2
number3
number4
number5
Or
number6
Put the headings you want to jump to in the post and format them h2/h3 etc.
<p><a name="number1"></a></p>
<p><a name="number2"></a></p>
<p><a name="number3"></a></p>
<p><a name="number4"></a></p>
<p><a name="number5"></a></p>
OR <p id="number6"></p>
This is what you put in the link you make in the list. Just make the link in visual mode as normal, copy the names in and hit 'apply'.
#number1
#number2
#number3
#number4
#number5
and the 'id' one is the same at this end.
#number6
Test your links in a preview and correct any that are leading to the wrong place.
Paragraph number1
Sometimes I like to make an empty para (just hit enter or use the code above) just before each heading and put the jumplink there. That makes sure that the heading of the paragraph is seen properly.
The behaviour and the look might depend on the theme you are using.
Write your content here for Paragraph number2
Paragraph number3. This can just be a short sentence or indeed a long ramble - whatever you like, in fact Paragraph number4 need not be a heading at all but can be in the middle of a sentence like this.
Paragraph number5 Might be another heading, a video or an image.
Let's say it was the heading above and now you have jumped to it and can read what it says.
You can copy and paste my examples, substitute your own headings and off you go, leaping around your article! If you stick to numbers, I think it will be quicker as well as easier to swap about.
Paragraph number6
Number6 is an example of using 'id' within code. This is what is in text mode:
<strong id="number6">Paragraph number6</strong>
And this jumps back up to the 'id' example:)
You can link From anywhere to a named point multiple times - Just be careful not to use the same 'a name' (or id) twice.