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!

7 responses to “Anchor links / tags in SharePoint 2010”

    • Ok let’s get to the bottom of it- can you confirm:
      – SharePoint version (build number if possible)
      – Browser version tested
      – Publishing cache enabled (are we looking at a cached version of the page that perhaps has not been refreshed with your changes?)

  1. Hi,

    I am trying to use an anchor across different SharePoint pages with Publishing enabled. I added the anchor on the one page. On the other page, I did Insert –> Link and made the URL the other page and the bookmark the #bookmark on the other page. The result is only going to the top of the subsequent page, but not to the bookmark. Ideas?

Leave a Reply to mp0 Cancel reply

I've been low-key stressed about how to view the many email inboxes I have in Outlook in one view without having to scroll and hunt for new messages.

The 'macro' method in this video works great.

View Multiple Inboxes at Once in Outlook 365 via @YouTube

We help Department of Defense clients realize benefits such as faster decision making, total traceability, and automated updates by identifying targeted goals and putting an emphasis on a culture of adoption through buy-in by individual team members.

How to: Create a report quickly from a #SharePoint list or library in the #PowerBI service

Leverage Microsoft Project for the web with the Project Accelerator via @YouTube

Load More...