Linking to a Specific Point on a Page

Updated June 1, 2011

Doc Sheldon

While this tip is specifically written for the WordPress platform, it should work fine for any html application. It’s designed for those situations where you need to link to a particular point on a page, rather than just to the beginning of that page. The link can originate from the same page or from another. It can even originate from another site entirely, provided you have the ability to plant the small bits of code on both the source and destination pages.

Let’s say you want to list the three chapters of a document that appear further down the page. The process is really quite simple. First, you define the destination points, which in this case will be the sub headers beginning each chapter. This is done in the html editor pane of your WordPress back-end. You simply insert a tag right above the sub header beginning Chapter One, such as:

<a name=”one”></a>

That takes care of your destination point definition. Now you go to your origin point, and insert your hyperlink, thus:

<a href=”#one”>Chapter One</a>

You can then repeat the process for Chapters Two and Three, changing the reference point from one and #one to two and #two and three and #three, respectively.

That will give you something like this:

Chapter One

Chapter Two

Chapter Three

Chapter One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper, sem vitae faucibus imperdiet, lacus nibh ullamcorper orci, a tempus mauris turpis vel massa. Nulla libero nulla, molestie ac condimentum sed, placerat ac est. In pellentesque tellus nec nulla lacinia non volutpat ipsum dapibus. Duis egestas malesuada nisi, non egestas nisl semper ac. Cras lectus dui, lobortis sit amet ullamcorper eu, pulvinar quis sapien. Maecenas elementum blandit nulla quis tristique. Aenean et metus id enim feugiat fermentum. Etiam porta sodales eros ut varius. Aenean sagittis interdum mauris elementum congue. Vestibulum feugiat lectus non arcu suscipit hendrerit. Cras vestibulum tortor a neque ultricies hendrerit. Integer sem eros, ultrices vitae tincidunt pharetra, iaculis ac massa. Aliquam eu nisi in nibh dignissim eleifend sed a libero.

Chapter Two

Donec porttitor justo quis odio volutpat non venenatis purus porttitor. Proin sed turpis magna. Etiam sed laoreet dui. Pellentesque vel dolor quis diam tempus dictum ornare sed tortor. Vestibulum elit turpis, commodo eu ultricies nec, interdum quis justo. Etiam sed eros augue, non porttitor neque. Aliquam a sem neque, vel ultrices mi. Pellentesque vel nisl arcu. Vestibulum nec congue ante. Phasellus eu nisl diam. Sed tellus dolor, laoreet vel elementum vitae, faucibus ac nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin ut risus at velit commodo sodales. Ut rhoncus aliquam augue tempus lobortis. Suspendisse potenti. Nullam rutrum, velit eu ullamcorper volutpat, mi est lobortis ipsum, vel facilisis leo nisl eu sapien. Etiam eros nulla, tincidunt non dictum non, consequat non nulla. Vestibulum vulputate dignissim massa, at porta mi sagittis sed.

Chapter Three

Donec elementum lacus eu diam commodo congue sit amet nec dui. Phasellus vel nisi sit amet mi dapibus auctor nec dictum felis. Ut tortor massa, bibendum a vehicula ut, accumsan at metus. Maecenas eget arcu eu tellus pellentesque posuere at ut erat. Nullam ultrices posuere nulla sit amet euismod. Phasellus nisl ipsum, pulvinar vel rhoncus id, lacinia nec nibh. Nullam et velit quis nulla blandit euismod. Proin quis aliquam leo. Suspendisse in nisi nec tellus consectetur iaculis vel at mauris. Curabitur vehicula tincidunt dui, eu vulputate eros dignissim eu. Phasellus aliquam facilisis nibh, sagittis cursus enim rutrum ut.

It’s important that you type out these bits of mark-up within your html editor pane, rather than typing them in say, MS Word, and pasting them in, as the quotation marks have different qualities, and the links will normally not work. Note the difference:

<a href=”#one”>Chapter One</a> typed in MS Word – will not function properly

<a href=”#one”>Chapter One</a> typed in editing pane –  will function properly

You can do the same from another page, as well. The destination tags remain the same – you simply have to use a complete URL on the origin link, and add the destination #tag, such as:

<a href=”http://example.com/linking/#one</a>

Play around with this a little, and you will surely find some shortcuts. Once you’ve done it a few times, you’ll find it gets very easy. The one caution I would offer, however, is to be very careful about using these links on internal pages that don’t appear in your standard navigational paths. If you link to one of those pages, but the page has no outbound links on it, you’ll have given birth to a black hole for your page rank, by creating a dangling node.

 

Facebooktwittergoogle_pluslinkedin

Comments

  1. Thomas Fjordside says:

    The same trick also work with all ids in your code. ex. http://docsheldon.com/linking-to-a-specific-point-on-a-page#entry-author-info will bump you down to the author info on the page.

    Btw: Posted on June 1, 2011 by Doc Sheldon”>Doc Sheldon – Seems you have a misplaced ” somewhere 🙂

  2. Ahmad Wali says:

    Nice post doc! I’ve been using wordpress for 3 years now and never thought about something like this. IMO, it will also reduce the bounce rate too because you can point the user to most valued content of the post.

  3. Doc Sheldon says:

    Good idea, Thomas! See? I KNEW there was a reason we kept you on the payroll! 😉 I may just make that a standard feature here, if I can figure out how to do it automatically.

    Hmmm… Yeah, seems one of the little buggers has slipped his leash! I’ll track it down right after I get another cup o’ coffee in me. Thanks for the heads-up.

  4. Doc Sheldon says:

    H’lo, Ahmad! Long time no see! Thanks. I’ve used it before on websites, but it never occurred to me to use it on WordPress, so I decided to check it out and EUREKA! Thanks for popping in! Looking forward to seeing you around here more often! 😉

  5. Linda Stacy says:

    Nice little tutorial. I even use this method in a redirect for a domain name. I set the destination point at the desired spot in my about me page and redirected a URL to that spot through my domain registrar. Works like a charm.