I’ve been doing something called Page Jumps on my articles lately and I’ve had requests how to do them. So here I am. Page Jumps are when you do things like click on something that says Return to Top and it takes you to the top of the article.

Here are the Codes to use to have your Readers Return to the Top of page by clicking on those words. Make certain to do this in your Text Tab of your Post Editor.
AND where you see quotation marks that look backwards? They should face the words. They appear backwards here due to the color fonts. I know it sounds crazy but apparently the quotation marks are prioritizing the font stuff over the text stuff. Go figure.

Anchor Code-It goes at the very top of your article.
<a id=”Top“></a>
Go To/Return to Top Code-It goes where you want the Reader to be able to click.
<a href=”#Top“>Return to Top</a>

Don’t worry about the colors. That’s just something I have from later in the post where the red is what you leave alone, and the blue is what you can change. The Reader won’t see the colors. Just the words Return to Top in that second code.

That’s the simple way without any explanation of how things work. You can do it and things are fine. If you want to understand more, keep reading. You can bail out of here any time you like.

---

 

If you’re still with me, I’ve been using a lot of references and instead of having all the links and colors filling up the body of the article/post, I decided to go with a little more professional look.

I am going to break this up into different posts for different Titled jumps, even though they are all basically the same.

Today will be

How To: Include a Return to Top of Page “Page Jump”.

I’ll be honest with you. If you can do this, You can do any of the other Page Jumps I will discuss later in the series. But I’m not going to clutter up things with too many things at once.

You need two pieces of HTML Script/Code to do the Return to Top Page Jump. I gave them at the top but don’t worry they appear several times in the article. You saw how simple they are.

Bur first there are things to remember about HTML:

• Always use HTML in the Text Tab of your Post Editor. It will not work in the Visual Tab.
  
• When going through this article, all Red Bold Text is what is to be left alone. Blue Plain Text within the HTML Code is what you can change to meet what your need.
• Save often if doing a lot of HTML Code.
• Always open an HTML Code intensive post in the Text Tab. 

The following is how the Codes appear in a generic form, before you do what you want to them. I will also call the codes by these two Titles throughout this series but without the word Generic.

---

Generic Anchor code:

<a id=”unique-identifier“>words for reader to see</a>

Generic Go To code:

<a href=”#unique-identifier“>words for reader to see and click</a>

---

For Return to Top of Page, the Codes will end up like this.

Anchor code:

<a id=”Top“></a>

Go To code:

<a href=”#Top“>Return to Top</a>

---

Let’s talk Anchor Code a moment. You can now copy and paste the Anchor Code to the top of your post before everything else, even with the colors. Remember  no one will see the colors or anything else. The only way anyone can see the Anchor Code is if you put in something between the ><. And even then they don’t see the actual code itself.

Place the Go To code anywhere you need to in your post. For the Go To code, the only thing people will see is Return to Top. Why? because those words appear between the >< in the Go To code.

You can now do the Return to Top jump in your post.

---

If you keep reading, I explain about how the two scripts work and what makes parts of them important. If you are simply going to use them as is and you think any further explanation might confuse you then stop now. Just make sure to scroll down to connect with me at various places like Twitter and Facebook.

But if you stay, those two pieces of code will appear again at the end, so you won’t have to scroll back up to get them or worry about copying and pasting right now.

---

You are still with me. Here is the Generic Anchor (GA) code and the new Top Anchor (TA) code, see how the Anchor code changed?

GA <a id=”unique-identifier“>words for reader to see</a>

TA <a id=”Top“></a>

The unique-identifier was changed to Top. That’s the word I am using to let the Go To code know where to go to. 

The words for reader to see was deleted. I personally don’t want anyone to see something at the top of my article that isn’t part of my article. You can have the word Top in there if you want people to know that’s where the Top is they are going to. The code would look like this

<a id=”Top“>Top</a>

In the Article the Reader would see the word Top in the article.

If I made the code look like this <a id=”Top“>Banana</a> the Reader would see the word Banana in the article.

But to make this work, the important part is that unique-identifier, what is now showing as Top. Now we need the Go To code and something for the Reader to Click so they can Go To the Top.

You have  the Anchor <a id=”Top“></a>
Now here is the Go To <a href=”#Top“>Return to Top</a>

Notice how the word Top appears after the = sign in both of the codes? The words are identical to each other. That is important. The script is case sensitive. Leave that # in the Go To code.

With those two scripts above you can now have some fun. You can put that Anchor at the top of your page, or anywhere in the page for that matter, and then paste that Go To script anywhere you like and as many times as you like.

That’s it for today.

If you want more detail today, and I mean MORE detail, click here. Otherwise I’ll have another article soon with more Page Jump tips. In the meantime,

Let’s connect. and then if you have a How To suggestion click here for the Contact Form.

https://twitter.com/RonovanWrites

https://www.facebook.com/pages/Ronovan-Writes/630347477034132

https://plus.google.com/u/0/+RonovanWrites/about

 

 

 

 

You decided you wanted a little more. Okay. Well, it’s a lot more now that I’ve typed it up.

Anchor Code: <a id=”unique-identifier“>words for reader to see</a>

Go To Code: <a href=”#unique-identifier“>words for reader to see and click</a>

You can do all the Page Jumps you want with these two pieces of code. I’ll have posts coming up that breaks them out more but if you want to play a little here’s all you need to do.

See that unique-identifier?

As long as you have that Identical in both codes, you can put them anywhere in your post. You want someone to have the option of skipping down to here, like I did earlier? This is all you do.

Anchor Code: <a id=”here“></a>

Go To Code: <a href=”#here“>here</a>

The id is what is known as a Header. So the id/Header for the page jump to this section equals “here“. So my header is the word here. That lets the Go To Code know what Header word to Reference when looking for where to Go To. See what I did with the red bold letters? href, and what does the Go To Code include? href.

---

Review for a moment and catch your breath. All of that we just talked about means, the words unique-identifier must be identical in both codes to talk to each other. If they don’t, they won’t work. That’s all we said.

---

Now to walk through what each part of the Anchor code means. Like I said earlier, I’m not using techie words here. At least not intentionally. If you think is too much, bail now before I confuse you.

<a id=”here“></a>

Each character in the code means something. I may not give you the technical jargon, but I will give you the gist of it all.

• <a (Tells the blog this HTML script is going to create a link up with another script on the page or another page. That’s what <a means, a link. Just like <p means paragraph.)
• id=”here“(This is identifying your Header. Your unique place for the Go To Code to unite with. The word you type where it says here is what the Go To Script is going to look for. It’s case sensitive and needs to be exact in both HTML Codes.)
• >< (Anything between these two will appear to the Reader of the article/post.)
• /a> (This closes the script. If you don’t have the / in there,  there might be additional words affected. I found that out with another type of script.)

Let’s walk through what each part of the Go To code means. Or at least what it means to us.

<a href=”#here“>here</a>

• <a (Tells the blog this HTML script is going to create a link up with another script on the page or another page. That’s what <a means, a link. Just like <p means paragraph.)
• href=“#here“ (This is telling the blog the HTML script is looking for a Header Reference that is equal to a specific word. When you created the Anchor with the Anchor Code you created a Header. Now when a Reader clicks the Go To words your URL will change slightly. For example, when you clicked the word here in order to come down to this part of the page the URL now ends with #here. Notice in the following how it appears when References is used as the Anchor. https://ronovanwrites.wordpress.com/2015/04/11/japan-manga-comics/#Tezuka6-8)
• Now this is the cool part. You can put that link, that URL since it has that Header in it, with that #, in your Go To code where it says here, and now Jump To that spot in that page. Because that URL is an Anchor on that other page.) But what would that Go To code look like? <a href=”#https://ronovanwrites.wordpress.com/2015/04/11/japan-manga-comics/#Tezuka6-8“>here</a>
• >< (Anything between these two will appear to the Reader of the article/post. This could say here, or Return to Top, or Banana. As long as there is one something in there for the Reader to click, they can Page Jump.)
  
• /a> (This closes the script. If you don’t have the / in there, then there might be additional words affected. I found that out with another type of script.)

Now you can see with just these two codes you can do a lot.

Anchor Code: <a id=”unique-identifier“></a>

Go To Code: <a href=”#unique-identifier“>word for readers to see and click</a>

Return to Top

© Copyright-All rights reserved by ronovanwrites.wordpress.com 2015