Using HTML, I am going to show you how to make a link jump. A link jump will send you to a targeted destination. This is useful when you want to reference a specific point within a long post.
I broke this down into ‘Lessons’ that progressively build upon the previous.
Lesson 1- Making a link jump to its destination
To make a page jump we are going to have to get familiar with HTML (HyperText Markup Language) Code. Lets switch to the section where we can do this.
Click ‘Text’ on your page editor.
Ok, we are going to need two lines of code. The first command contains our link that will send us to the destination. And the second command is the target destination from the first.
It will be written on your text screen like this,
First line of command:
<a href=”#target”>I am a blue link, click to jump!</a>
Second line of command:
<p id=”target”>I am the target text.</p>
- You can change the word ‘target’ for any word you prefer. For example, it can be changed to ‘example’. Remember to add the # sign in the first command and remove it from the second destination command.
- The ‘I am a blue link, click to jump!’ is simply your blue text link as it appears on the final page. Change it how you like.
- The first line of command <a href=></a> is the attribute reference or links destination. You may have noticed this already when linking a URL destination.
- The second line of command <p id=></p> is the paragraph identification or our jump destination.
- Every time you jump, the destination command is always at the top of the page.
Once you complete this, on the finished page it will work like this:
I am the target text.
Lesson 2- Creating both a destination and a link jump
In the first lesson we learned to jump to a destination. In this next lesson we will take that second regular text destination and turn it into jump that will send us back to the original link. We are turning the second command into a link.
The first line of command in your ‘Text’ editor looks like this:
<p id=”target3″><a href=”#target2″>Click this blue link to jump!</a></p>
The second line of command will look different this time:
<p id=”target2″><a href=”#target3″>Jump back to the blue link above this one.</a></p>
- Noticed how I had to assign separate targets for each jump. I chose to use the names ‘target2’ and ‘target3’ for each separate instance. If I kept ‘target’ as in the example from lesson one, my <a href=></a> jump lines would’ve sent be back to the first command of the ‘target’ destination (which is useful, if that’s what you want).
- I have tried writing the code in multiple ways and it did’t seem to make a difference- just keep it organized.
Here are the results with the two links jumping back and forth (the commands are as shown above):
Lesson 3- Jumping to another page
Now we are going to jump to another page. You can link the URL to the page or you can make the jump to an exact point of reference (destination) on that page.
First you need to create a new page and get the URL from that page. For me I am using this URL.
After your URL you need to add / # target 4:
All together the complete first line of code looks like this:
<a href=https://buildyourownwebbusinessnow.com/?page_id=598&preview=true/#target4>This blue link will send you to another page destination.<a/>
Here is how it looks on the page:
This blue link will send you to another page destination.
Lesson 4- Jump to a heading
I am going to show you how to jump to a title heading. I did this at the beginning as a way to jump to for each lesson I created. This is a convenient way of access. All we are doing is adding more code/command to our existing command. And by now you’ve had many examples. Lets get started.
For this demo I will use a ‘Heading 5’ with a title called ‘This Tutorial is Awesome’ as an example.
The link jump command is:
<h5><a href=”#target6″>This Tutorial is Awesome</a></h5>
The destination heading 3 looks like this:
<h4 id=”target6″>’My 5 year old can do this'</h4>
‘My 5 year old can do this’
If you found this lesson difficult then please start at the beginning and learn ‘Lesson 1- Making a link jump to its destination’.
Here we are going to learn how to have two separate links targeting a single destination. (You may be able to have more than one destination by including multiple <a href> tags but I haven’t tried this yet. Please leave a comment below if you know it works.)
For this demo we are going to use ‘Lesson 5- Create a double targeted anchor destination’ to serve as an example and I will show you what I did.
The code at the top of the page looks like this (only for this lesson, the rest are regular <h><a href> tags. see Lesson 4):
<h5 id=”target7″><a href=”#lesson5″>Lesson 5- Create a double targeted anchor</a></h5>
now lets anchor it to our destination, i.e., this lessons heading ‘Lesson 5- Create a double targeted anchor destination’:
<h2 id=”lesson5″><a href=”#target7″>Lesson 5- Create a double targeted anchor destination</a></h2>
here is our second link that sends us to the top of Lesson 5
<a href=”#lesson5″>Click to go to Lesson 5</a>
Lesson 6- Jumping to an unseen destination
In this final demo we are going to use our link to skip to a hidden destination. This means the page will jump but there will be no visible text. All you need to know is the command. I will start with the hidden command first.
Insert this HTML text on any line you want as a hidden destination:
Here is our final link code:
<h5><a href=”#target8″>Congratulations, You’re Awesome for Finishing All the Lessons! <strong>GO BACK TO THE TOP OF THE PAGE NOW!!!<strong></a>