Anchor links / tags in SharePoint 2010

Standard HTML Anchor links are a traditional and useful means to send users to specific locations in web content.

To begin with, here is an example of a HTML anchor: Jump to Bottom
As you can see, HTML page anchors allow visitors to jump to a specific place in the current webpage, or to jump to a specific place on another web page.

You usually implement HTML anchors if you want a graphic or text to link half way down another page. That way your visitor isn’t required to read all through the page to get to the part their interested in.

To create an anchor HTML link that points to another place on the same webpage, you need to create two anchors:

First you create an anchor link that the person clicks on initially. Here is the HTML code for the anchor link.

<a href=”#anyword”>Go to any place</a>

Next, you need to create a named anchor in the spot that you are going to jump to. This anchor will require the following syntax.

<a name=”anyword”>Go to this place</a>

For example, if I wanted to allow folks jump from the words “Go to Bottom” to the bottom of the page I need to create 2 anchors.
I need to place an anchor that says “Go to Bottom” that points to the bottom of the page. The syntax is:

<a href=”#bottom”>Go to Bottom</a>

I also need to create a named anchor at the bottom of the page. The syntax is:

<a name=”bottom”>You’re at the bottom!</a>

HTML anchor links across two webpages

Now for the second type of HTML anchor. The script below creates a link that points to another place on a different webpage. Again, you need to create two anchors:

Create anchor on Page A pointing to “here” on page B

<a href=”PageB.html#Here”>Go to Here on Page B</a>

Place a named anchor on PageB.html

<a name=”here”>Here</a>

HTML Anchor Links in SharePoint

Unfortunately in some areas of SharePoint 2010 like Wiki pages, users experience a side-effect of all the gadgetry involved in the system: normal HTML anchors that they may enter into the content areas are “broken” and do not respond. I did some checking and found the following behavior:

-IE 8 – goes to the Anchor Tag on the new page, then jumps to the top. From my understanding this is due to the ribbon bar or something on the page that overrides focus
-IE 7 – works
-IE 6 – works g
-FireFox 12 – page loads and never generates a focus anywhere…not even the jump you get from IE 8

Solution 1 (Basic HTML editing comfort required):
Add the target anchor link as normal, in the following example Chapter1 is the text you replace with your own anchor name & text:

<a name="#Chapter1"></a>Chapter 1

Add the following as the hyperlink to the target:

<a onclick="javascript:this.href='#Chapter1';" href="javascript:;">Chapter 1</a>

Solution 2:
Edit your publishing page and select some text. Now click “Insert/Link/From Address”. In the pop up window just type “/” for the “Address” field. Remove “/” from the URL field and add “#Chapter1” or equivalent value to “Bookmark”. Now you will be able to create an anchor to “#Chapter1”. Just select some other text in your page. Now click “Insert/Link/From Address”. In the pop up window just type “#Chapter1” for “Address”. Save and your inpage link will work.

You’re at the bottom!

anchor links, anchor tags

Comments (7)

Leave a Reply

Your email address will not be published. Required fields are marked *