March 29, 2024

MyNature Animal Tracks MyNature Tree Guide MyNature Animal Tracks MyNature Fishing App

Page Jumps and Anchor Points Made Simple

There’s one thing for sure if your blogging and that’s that at some point in time your going to want to make use of page jumps or anchor points.  So what is a page jump or anchor point? Simply put it’s a link from one spot in your blog article to another spot in the same blog article. Page jumps eliminate the need to scroll through the whole article to find a certain subject your interested in reading. On my blog for example I usually keep a day to day journal when I go on a trip. I’ll start the blog off with a table of contents like format that will look something like this.
Day 1 ~ Proxy Falls
Day 2 ~ North to the Coast
Day 3 ~ Exploring the Bluffs
 
My description of Day 1, 2 and 3 etc., will be further down the page. When you have several days listed or many subject titles listed in a long article that your writing your going to want to link the title to the body of the post with that titles information  ie: Day 3 ~ Exploring the Bluffs becomes a link to the actual write up of Day 3 where I explored the bluffs. 
 
Are you still with me?   Don’t be scared, I’ve been to enough other sites that try to explain this and I’m left sitting there with my mouth hanging open wondering what the hell they’re talking about. Some sites get way too technical and assume you know how to write code so take a deep breath and I’ll see if I can make this easier to explain than most.
And here we go!
 
 I’m going to assume your using Word Press.  At the top of the toolbar in the right hand corner you’ll   see two selections, Visual and Text. Write your blog as you normally would in the “Visual” selection. Once your blog is written click on the “Text” option. Your now going to see your blog article in HTML format, no big deal and don’t get nervous. If you take a minute to just scroll through there you’ll see all that you wrote is still there in plain English, it’s just intertwined with bits of code.
 
Now locate in there the title that you want to make as the link (page jump). Just for example we are going to use  Day 3 ~ Exploring the Bluffs. We need to insert this piece of code before the title.
<a href=”#3″>
 
Our title should now look like this,
<a href=”#3″>Day 3 ~ Exploring the Bluffs
 
We still need to insert one more piece of code after the title and that code looks like this:
</a>
 
Our whole title should now look exactly like this:
<a href=”#3″>Day 3 ~ Exploring the Bluffs<a/>

Now of course your going to want to customize this to your blog and what you want to link. So lets just say your writing a blog on flyfishing and you have several paragraphs or chapters. It’s easiest if you always use numbers for chapter or paragraphs or the points that you want to link from. So lets say chapter one is on “Fly Tying”, your code would look this:

<a href=”#1″>Fly Tying</a>

 
Chapter 2 is on “Casting to the Rise”, your code would look like this:
<a href=”#2″>Casting to the Rise</a>
 
Chapter 15 is on “How to Read the Currents”, your code would look like this:
<a href=”#15″>How to Read the Currents</a>
 
Yes, it’s that simple to make the title link, just change the numbers of the links and change the titles, all the rest of the code remains exactly the same. Pay attention to spacing that’s important. If you don’t have the spacing where it’s needed the link won’t work.
 
Now, for the second part of the page jump. This is where the link above is going to link to, also called an anchor, it’s where the link we made above is going to “jump” to. This is just as easy with a small piece of code needed as well.  Scroll down through your content and find where you want the link to go. As in the example above were going to use  “Day 3 ~ Exploring the Bluffs” 
 
Before the title we enter this code:
<a name=”3″></a>
 
Our title should now look like this:
<a name=”3″></a>Day 3 ~Exploring the Bluffs
 
That’s it!!  All you do is substitute your titles for the ones I used as an example, for instance lets use “Casting to the Rise” that we used above. We labeled that title number “2”  so our code would read as follows:
<a name=”2″></a>Casting to the Rise
 
You only need to change the number in the code to match the corresponding number you used above for the original link and change the title each time to match the title of that same link.  So lets put them together so you can see it better. We’ll use “Casting to the Rise” as an example and number it  8.
Our code will look like this for the link:
<a href=”#8″>Casting to the Rise</a>
 
and that link will jump to the content of “Casting to the Rise” and that code will look like this:
<a name=”8″></a>Casting to the Rise
 
One thing to pay attention to while you’re in “Text” mode. If you have any other words or codes before or after your links you just created make sure you have a space between them. I’ll use an example of what I have run into in my own blog. Often times I see  <address><address> or something like that before and after my titles or paragraphs. You want to make sure these do not run into your code.  Space everything before your code and after your code in both the starting link and the anchor point that the link jumps to. For example if you see your title listed like this <address>Casting to the Rise<address>. You want to space that out before you enter your code. It may look like this when your done <address>      <a href=”#8″>Casting to the Rise</a>      <address><address>    Just put a lot of space between them. the same goes for the anchor point or where the link jumps to.
 
 I hope that was an easy lesson and I certainly hope it helps you out if your trying to create page jumps and anchor points.  You can see how I used mine here in these two blog posts.
http:/2011/08/alaska-august2011/
http:/2013/05/dreaming-of-the-pacific-coast-highway/
 
Happy Blogging!!