I Know Just Enough Code To Be Dangerous

how to create a jump around 

This week’s blog post was going to be a  glossary of terms.

dictionaryI mean, if I have to look up things, then others do too, right?

Well, once I really started to get into the project and compile the list of terms I was going to include, I realized that the job I’d taken on was actually much more than a blog post.   It needed to be it’s own page on the site; a resource page.  

Click here to go to the NEW GLOSSARY OF TERMS.
(cue angels singing)
 
Needless to say, it was quite an endeavor…

And, in an effort to make it truly useful and easy to navigate for YOU – I realized that I needed to create a “jump-around”.

You know…  One of those “click here to go to the top of the page” or in this case, click here to go to the letter “N” navigational bells & whistles I’d seen.

Which brings me to this week’s post…

Click HERE to jump to the footer at the bottom of this page

Cool, huh?  (If, you didn’t try it…  please do.  Go ahead…  Click above…  We’ll wait.)  
You see, I know just enough HTML code to be dangerous.  (Shhh, Don’t tell my clients…)

That’s not quite true. Let’s put it this way.  I can change my own tire, but I don’t know how to build my own car.

So, every time I learn a new trick I get excited and then I want to share it with others.

Therefore…  without further ado…  

HERE IS HOW TO CREATE A “JUMP AROUND” WITHIN YOUR PAGE OR POST.



Before we get started, know that we'll be working in the "text" editor of your post /page creation window, not the visual editor.

visual - text editorClick on text in the upper right hand corner as shown above and switch from "visual" to "text".  

Once you switch over, you should NOT see any images, only code.

Unless, you've been doing something fancy, you'll see a bunch of text and some gibberish all shoved together.   

It may appear this way, but trust me - there is a method to this madness.   

Look closer and you'll start to see a pattern emerge.   What we know as a paragraph will be preceded with <p> and ended with </p>.  It's the equivalent of hitting the return key in Word.

(If it helps to separate out your paragraphs, feel free...  as long as you don't delete any characters, you won't change the code in any way.)

Once you can see the individual paragraphs you've written, find the place where you plan on offering the option to "jump around";  the "click here to go there"  button...

Copy the entire line of code below and paste it into your own document

<a href="#codewordTOP">Click here to jump to the top of the page</a>

~ given the context, this specific bit of code would be at the bottom of the content since it gives you an option to jump to the top.

Feel free to tweak it (what's in pink &/or blue) to whatever best suits your content.

After you copy and paste the first bit of code, copy this second bit below and place it where you want the viewer to end up.  ie at the top of the page, middle of the page, wherever...

<p><a name="codewordTOP"></a>Top of the page</p>

Again, tweak it to whatever best suits your content.  Obviously, you can use whatever "codewords" you want...  

The words highlighted in pink are the codewords that reveal the positioning and the blue words are the actual text (in this case "Click here to jump top the top of the page")  that the viewer gets to see.  In the 2nd example, there doesn't have to be any text at all, if you prefer.

Feel free to ask any questions in the comments below and I'd love to see examples of how you've taken this one little bit and used it to help you in the online arena, so drop your unique url in there too.
Cool huh?  OK...  Click here to jump back up to the top.

You may also like