Jump-to coding is handy for when you have a webpage with a lot of information on it and you want your readers to be able to jump to key headings with ease.
An example is my academic proofreading portfolio page. While I’ve taken care to ensure all the information on my homepage is above the fold, the academic portfolio page is a different story. It lists all the academic projects I’ve worked on to date. I want to be able to show potential clients the breadth of my experience, but there are nearly 200 book titles on display. That’s a lot of text to take in – and it’s likely to bore readers to tears unless I help them to navigate the page with ease. That’s why I've used the jump-to html code.
Jump-to code is really easy to incorporate even if you’ve no experience of coding. To see how it works in real time, click on the picture below.
Most of the popular DIY website builders such as WordPress and Weebly include html boxes that you can write your code in. Here’s the code you’ll need if you want to incorporate jump-to instructions:
You have three headed areas on a page you want your readers to be able to jump to: Training, Qualifications, and Recent Clients.
Here is the code you could place in your html box at the top of your page:
Jump to <a href="#train">Training</a> ● <a href="#quals">Qualifications</a> ● <a href="#rc">Recent Clients</a>
This would appear as:
Jump to Training ● Qualifications ● Recent Clients
If you don’t want to use the words “Jump to” you can change them to whatever you want. The same applies to the bullet points. For example, you could use the following code instead:
For more information click on the following: <a href="#train">Training</a> | <a href="#quals">Qualifications</a> | <a href="#rc">Recent Clients</a>.
This would appear as:
For more information click on the following: Training | Qualifications | Recent Clients.
Now place the following code in an html box just above the section of the page with training information:
Then you would place the remaining two html boxes (with the amended code) just above their respective sections:
In the above example "#quals" could be rendered in any way you wish ("#q", "#qualifications", "#qu") as long as you ensure the abbreviated version in the above-heading code is the same (<a name="q"></a>, <a name="qualifications"></a> ,<a name="qu"></a>).
Some of you may have websites that allow you to do this automatically, without going through the rigmarole of coding yourself. However, if you do have to embed your own code then I hope the above example demonstrates that you don't need to be an html whizz to get the desired results.
Search the blog
I'm an Advanced Professional Member of the UK's national editorial society.
All text on this blog, The Proofreader's Parlour, and on the other pages of this website (unless indicated otherwise) is in copyright © 2011–17 Louise Harnby. Please do not copy or reproduce any of the content, in whole or part, in any form, unless you ask first.
Author Member of The Alliance of Independent Authors (ALLi). I abide by its Code of Standards in regard to my status as an independent writer.
Advanced Professional Member of the Society for Editors and Proofreaders (SfEP). I'm a signatory to its code of practice as a professional editor.
Featured in The Book Designer's Carnival of the Indies: Joel Friedlander's collection of 'outstanding articles recently posted to blogs'.
Winner of the Judith Butcher Award 2017 in respect of 'highly visible contributions to the SfEP and its membership'.