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!

Incoming search terms:

Tags: ,

Trackback from your site.

Keith Tuomi

Keith is SharePoint Consultant and problem solver with itgroove. He's been focused on Microsoft technologies as a Developer and Web Applications specialist since the beginning of the internet era in the early '90s, with formal training coming from the esteemed British Columbia Institute of Technology. He is a SharePoint MVP, which is a coveted Microsoft award for community contributions and technical excellence. Keith has wide array of international experience and is also adapt at translating your business needs into bits & bytes.

Comments (5)

  • Neil

    |

    Thanks Keith,

    Solution 2 works a treat for our users who are not HTML savy.

    Thanks.

    Reply

  • mp0

    |

    Neither of these solutions work.

    Reply

    • Keith Tuomi

      |

      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?)

      Reply

Leave a comment

Recent Comments

  • Panoone

    I just hit this same issue with a web part I’d developed for 2013.

    Common sense dictated that that /_layouts would point to the current version. But the SharePoint dev team had other ideas. ;^)

Follow me on Twitter

Office 365 Service Health

  • Service: Exchange OnlineIncident Type: E-Mail and […]
    Sat, Jul 26, 2014
    Source: Office 365 Service Health Status
  • Service: Exchange OnlineIncident Type: Management […]
    Sat, Jul 26, 2014
    Source: Office 365 Service Health Status
  • Service: Exchange OnlineIncident Type: E-Mail and […]
    Fri, Jul 25, 2014
    Source: Office 365 Service Health Status
  • Service: Exchange OnlineIncident Type: Management […]
    Fri, Jul 25, 2014
    Source: Office 365 Service Health Status
  • Service: Office 365 PortalIncident Type: PortalSta […]
    Thu, Jul 24, 2014
    Source: Office 365 Service Health Status

SharePoint & Office Patches

VisualStudio.com Service Health