Creating Jump-to Links in WordPress

Here’s a tutorial on a topic I know I’ve Googled a number of times, searched for in my HTML book and I know others have searched for only to land on my blog! But until now I don’t have a tutorial on creating jump-to links, not to be confus-ed with jump-links in the Google search snippets. Really I’ve always understood these on-page links (where you create a link that goes to another part of the page…Wiki-esque) as “anchor” links. So I distinguish between the two jumpy linky things like this:

When I say “jump-to” or “page jump” links — I mean on-page links that go to another place on the same page, popular in Wikipedia.

When I say “jump links” — I mean those links in a Google search snippet that take you to various other parts of the same page, but from off the page…in a search result…a jump-to link on steroids.

I’ve quickly created what follows for illustrative purposes. First in visual view–this is what readers see. Then below it a screenshot of the same in the html view on my blog editor…

Cool HTML Tricks for Web Copywriters

Customized Page Title Tags

You have great control over your page keywords when you learn how to customize webpage title tags…

Customized Meta Descriptions

What’s come to be known as the Google search snippet is also the page html description, a meta tag and a component of behind the scenes of SEO….

Heads and Subheads

Content pages with keyword optimized headlines and subheads out-perform all others…maybe a bit overstated, but maybe not….

Page Jump Links

Not all web pages can cram content above the fold. What to do when you have a lot of pieces of related content on one webpage? Anchor links or page jump links are the solution…This wiki-esque html trick is a must-have for your html bag of tricks….Impress clients. Work quickly. Visualize content and copy solutions. Google loves page jump links….witness the new Google search results jump-to links wrapped into many search snippets.

Here’s the html view of the above:

html detail for on-page wordpress jump-links

I have a folder on my laptop I call html stuff. In it I keep a few cheat sheets I use regularly. A short cheat for building the page jump links is included. This is my “dummie” html for building these on-page links:

Create a Page Jump/Anchor link

1. Starting page link (anchor)

<a href=”#identifier”>click here</a>

2. Second link, where the first jumps to:

<a name=”identifier”></a>suddenly you’re here.

Advertisements
, , , ,

Subscribe

Subscribe to our RSS feed and social profiles to receive updates.

13 Comments on “Creating Jump-to Links in WordPress”

  1. Steffen Buus Says:

    Very helpful. Thank you!

    Reply

  2. Mike Says:

    Mine seem to jump to another posting I have on my blog. Is it something in my CSS code? Everything looks correct.

    Reply

  3. ayesha12 Says:

    Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck

    Reply

  4. Dwayne Says:

    Works like a champ!

    I attempted this awhile ago with my shopping cart software (Zencart) and it defaults to the main page every time (frustrating!) so I gave up and basically forgot about doing this. I just recently needed to add this type of jump link to 6 pages on a non-profit’s website because the pages were broken into sections (States) and was quite long.

    I did discover I needed to place the links outside heading tags for each state, otherwise the font would turn blue and the heading would act like a link when hovered over but go nowhere.

    Thanks!

    Reply

  5. Mark Robinson Says:

    Any idea if you can offset this by a set amount of pixels?
    I have a fixed non-scrolling header so when the link pulls up that part of the page the first 100pixels are hidden under the header.

    Reply

  6. steve Says:

    How can I link to another part of the page using a button as opposed to just text ????
    I tried the “<a href=" and it works on text but can't seem to get it to work on button.
    Maybe I am putting the code in wrong place?

    I did manage to play around with the button code and put in the info where the "#" is after button link, but instead of it jumping to the correct place, it opened a new page at the correct place.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: