Easy HTML for Return to Top links and More!

Ronovan Blogging

Have you noticed when visiting some of my challenges how you can click a word and skip around the page? I call those Page Jumps or Skips. I’ve written articles here on how to do several different kinds, but today I’ll show you two bits of HTML code you can use to do several things. Believe me when I say this is a lot simpler than you may think, or it may look at first. No, I didn’t learn this in a school. If I did I probably would know some proper names for things. I’m a lay person about this stuff and try to give it to you in simple English, while using some proper jargon.

One fun thing you can do with what I’m going to do is this. I want you to click on the following words. Go to Comments. Then scroll back up here or hit your back button.

A QUICK HELLO FROM HTML

What’s HTML? It means Hyper-Text Markup Language. Glad you asked? Make more sense to you now? Me neither. How about “a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.” I got that from Google when I typed in HTML definition.

HTML doesn’t use normal words. If it did it wouldn’t be Code. Yay, us, right? Boo! Hiss! Actually, it can be fun when you know not to be afraid of it. Practice in a post and if you mess it up, so what? You don’t have to hit PUBLISH.

Let me give you an example of HTML language.

HREF means hypertext reference. Basically for us it means it helps create a hyperlink to something when combined with other information. For example, if I wanted to put a link to Amazon for my book here, and then went to look at the Code in the TEXT tab in my POST EDITOR in WordPress, I would see href=”http://www.amazon.com/AMBER-WAKE-Gabriel-Falling-Adventures-eboo, at least that’s the beginning of it. Notice the href at the beginning. That’s HTML.

In other words, you’re using it every day when you publish a post.

INSIDE THE POST EDITOR

There are two tabs in the POST EDITOR. One tab is the VISUAL tab, which is how it looks on the actual site when published. This is the simple way of doing things and you can just use the TOOLBAR to change Text Color, Text and Image Alignments, and general things like that without doing any altering.

The other is the TEXT tab where all the HTML happens. All that Text Color changing and all you do in the VISUAL tab, well the HTML part of that can be found in the TEXT tab. In the TEXT tab you can change spacing between paragraphs a bit more, and do some other things as well, which is why I’m writing this in the first place.

One thing to remember is that when you do these scripts, make sure not to switch back and forth between the VISUAL and TEXT tabs. You will lose your newly added scripts. I click on SAVE DRAFT often if it is a large project. If you are curious how it is looking, click on PREVIEW.

So far so easy.

THINGS TO NOTE AS WE MOVE FORWARD

You will see COLOR CODING, BOLD FACE, and LARGE FONTS as we continue. All of these are for differentiating information. There is no need for different colors, bold, italics, large fonts, or anything other than plain text when doing HTML.

For today:

RED-Means you don’t change that in the script.

GREEN-Means you can change it. Most likely you will to meet your purposes. Usually these are real words, such as what a Reader will click on to jump to another part of the page, or it may be the Destination one reaches after clicking. A Destination can be a word within a sentence, or even a Heading for a Category, Paragraph, or any other thing you want it to be.

PINK/PURPLE–Is used for the symbols ><. When you see those in that formation, it means you can type words between them and those words will be seen in the actual published post while the rest of the Code is invisible and takes up no space at all. The words between the >< will be shown in GREEN below. See above for what GREEN means.

You’ve seen all of this at work before.

You’ve seen Return to Top in an article before, right? Did you see >< on either side of those words? Did it look like >Return to Top<?

No it didn’t. That’s because the >< is part of the long script and thus is invisible and as far as the visible post is concerned, doesn’t exist. All you saw was what I’m referring to as the GREEN part between the ><. >Return to Top<

All good?

I’M GOING TO START WITH THE GO TO CODE. (At least I call it that.)

Go To/Return to Top Code-When the Reader clicks on it, it takes the Reader where they want to go. If you participate in my challenges you will see something that says click HERE to skip to the Prompt. The word HERE replaces the words Return to Top in the code below. That’s how useful the two codes are I’m going to show you.

Remember, in the code below the RED parts you leave alone, and the GREEN you change.

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

So we have the href which is saying “I’m creating a link.” Then we have the #Top which is the Destination for the link, like Amazon was the destination for my book link I used earlier. Finally we have the words the Readers will see. What will the link look like to the Reader?

Return to Top

You can put anything for people to see between the ><. Just like you can use anything for the Destination or ANCHOR CODE. It doesn’t have to be #Top. What gave that away? Oh yeah, the fact Top is GREEN.

If you have problems with colors at all, the first line below is the Red, the Second is the Pink/Purple, and the third is the Green.

<a href=”#       “                               /a>

                               >                          <

                     Top    Return to Top

HERE IS WHAT I CALL THE ANCHOR CODE or DESTINATION CODE:

This is what you need in order to make the Go To Code work. If you don’t have the Anchor Code, then the Go To Code has no Destination to go to.

Remember, in the code below the RED parts you leave alone, and the GREEN you change. Keeping in mind the idea of the Return to Top you see in articles, again this one should make a lot of sense.

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

The Top here matches the Top in the Go To Code and they MUST match. The only difference is the # in the Go To Code.

By placing this piece of code at the very top of your post, before all other content and then the Go To Code anywhere else, even multiple times at various places, you are set for the Return to Top operation.

That’s right, you only need this one Anchor Code when doing a Return to Top operation. You can then use the same Go To Code in the previous section over and over again throughout the post, after every paragraph if you needed to for some reason.

Still easy? Hope you said yes.

If that’s all you want to know about what I call In-Page Jumps/Skips then you can click Like at the bottom, share the post, reblog it, and follow my blog for other great articles. If you want more to do with these two pieces of script that’s cool and useful, keep reading.

So you’re still here? You glutton for punishment you.

Things to do with the two pieces of Script/Code are very simple. Just keep in mind those things you can change can be changed to be anything, and the parts between the >< can be seen by the Reader.

OTHER USES FOR THE CODES

Let’s see this in a format like my Haiku Challenge Review. I’ll did a very short version here with the code typed in VISUAL first. Then I will do a section where the code is typed in TEXT.

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

Welcome to the Haiku Challenge Review. This week we had over 60 participants join in and share their offerings. Talk about different takes. I’m just glad I stopped picking winners.

Click on the Category below to go to the section.

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

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

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

(Assume an image is here)

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

Poet A of Number 1 Blog.

Poet B of Number 2 Blog.

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

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

Poet C of Number 3 Blog.

Poet D of Number 4 Blog.

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

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

Poet E of Number 5 Blog.

Poet F of Number 6 Blog.

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

Welcome to the Haiku Challenge Review. This week we had over 60 participants join in and share their offerings. Talk about different takes. I’m just glad I stopped picking winners.

Click on the Category below to go to the section.
Life
Romance
Wisdom
(Assume an image is here)

Life
Poet A of Number 1 Blog.
Poet B of Number 2 Blog.
Return to Top

Romance
Poet C of Number 3 Blog.
Poet D of Number 4 Blog.
Return to Top

Wisdom
Poet E of Number 5 Blog.
Poet F of Number 6 Blog.
Return to Top

That’s it for this week. See you tomorrow with a brand new set of words to use!

Much Respect

Ronovan

To see how this works in the Haiku Challenge Review I’ve mentioned, click HERE to go to one of my Haiku Challenge Reviews.

If you are clear about everything, skip to the bottom, click Like, share the article, reblog it and follow my blog for more great posts like this.
HTML Script Image

Amber Wake: Gabriel Falling Available on Amazon.

Amber Wake Gabriel Falling Book Quote Image

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

@RonovanWrites

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

 

34 thoughts on “Easy HTML for Return to Top links and More!”

  1. Ha! If only you’d written this about 2 months ago. Seeing you jump links made me wonder how it’s done and I went off and googled- easy enough, but what I learnt was, if before publishing you switch from text to visual in edit mode, you lose the code! It was a slow and painful lesson!

    Liked by 1 person

    Reply

      • Hmmm…pretty sure even after saving, if I switched to visual mode I was losing that part of the code, then I found discussions online of people experiencing the same, but I still haven’t found a fix that works aside from keeping it in html till publishing. I got a little impatient trying to filter out the noise from the real deal when searching for a fix. Interested in hearing your thoughts or those of others who put in the jumps after reading this post, although it sounds like you haven’t experienced this problem.

        Liked by 1 person

        Reply

        • Oh I do have them. 🙂 I think I even had them after publishing. Last year I did the A-Z Challenge using comic book creators from countries around the world that started with the letter. There were jumps not only within the pages but to spots in other pages as well. At one point I decided I would copy and paste the work I’d done into a word document, as a back up, until I hit publish. A-Z was a very intensive use of the jumps because I had reference at the bottom of the pages one could click the number of within the content. Was a lot of fun though. You may like this artilce, https://ronovanwrites.wordpress.com/2015/04/13/how-to-do-return-to-top-of-page-html/ I did last year. It shows how the href you use is the anchor location within another post.

          Liked by 1 person

          Reply

    • Thanks, Chris. I think they help make things look a little more professional at times when you throw them in the long posts. Also, if you do page jumps to header references in other pages it’s very cool. I did an article last year that had this information and the jumping to other pages in it. I may do a part two to this one if it gets good enough results, or even if it doesn’t. 🙂 If anyone gets use out of it, then it was worth it, and fun for me.

      Liked by 1 person

      Reply

        • It would work great for it. Also this one. https://ronovanwrites.wordpress.com/2015/04/13/how-to-do-return-to-top-of-page-html/ Go to the bottom after you see my face, and there it shows how you can even use the same code to go to a spot on another page that has an anchor code in it, much like what I do when I tell people to click HERE to go to the comments of my Challenge posts to read the poems. I also used the same codes during the A-Z challenge to have people click on reference numbers to skip to the bottom of the page, and then click back to content. Tedious, but fun as well when you see the final product in place, just don’t switch to the visual tab during the process. You’ll lose your changes. Once published you should be fine. What I do is actually copy my TEXT tab page and save it in a word document at various stages if it’s a long post, that way if I accidentally do something like clicking to the VISUAL tab or close the browser, I have the script for the whole page saved.

          Liked by 1 person

          Reply

    • Thank you on both counts. 🙂 If this works out for you, try this one, https://ronovanwrites.wordpress.com/2015/04/13/how-to-do-return-to-top-of-page-html/ It shows the same information, but after my closing image and salutations, I give more information about jumping to header references in other pages. For example, if you on the site now and reading this comment you might notice in the URL at the top it doesn’t just say the title of the blog and the date. It actually has #comment something in it. That’s a header reference. You could actually do a link just like I describe above, but instead of Anchor you put the URL link instead. 🙂 Two simple codes makes things look like a pro.

      Like

      Reply

  10. Thanks for this post, Ron. I am just trying to learn a bit about code at the moment due to me having a new site, This is making it a lot easier for me to understand! Like Al, I have also bookmarked it! 🙂

    Liked by 1 person

    Reply

  12. Hi! You’ve done a lot of good work here. I used anchors and links on my “Book Reviews for Horse Lovers” page to let readers click on a title at the top of the page and go straight to the relevant review. I posted screen shots of the very simple code you’ve illustrated so well at https://justcanthelpwriting.wordpress.com/2016/01/21/a-wordpress-victory-anchors/
    One minor addition: Ideally, when creating your links, you’ll get a teeny SEO boost by linking to descriptive text rather than “click here.” For example, instead of “take my latest xxx challenge HERE,” use “take MY LATEST XXX CHALLENGE.” Just a thought!

    Liked by 1 person

    Reply

    • Also, I just visited your blog, and after looking around, I thought you might want to visit my friend Colleen over at SilverThreading.com
      She and I co-host a weekly challenge there. She also works on my book review and author interview site, LitWorldInterviews.com.
      But I think you two might hit it off very well. Seriously. Oh, and love your profile photo. Very fun and engaging. Just right for a blog and social media. Excellent.

      Liked by 1 person

      Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.