Some time ago a colleague of mine needed a way to jump to sections of a page from a small list of links at the top of the page. The idea was to use a Content Editor Web Part for both the links and the text so that the end user could replicate the concept on other pages. Naturally I thought of anchor tags and initially thought the implementation would be pretty simple and straightforward. Because the process was not quite as intuitive as I originally thought, I ended up documenting the process and have provided it below.
- Anchor tags are simply just hyperlinks with a small twist. Open the web page in two tabs in the browser. One tab you will be using to copy the url in a later step.
- On the second tab, click on Site Actions/Edit Page and then open the Content Editor Web Part using the Source Editor.
-
Find the place where you want the page to go when you click your link. Paste in the following text :
<a id=nameofanchor name=nameofanchor></a>
Change the id and name values to something meaningful. The screenshot below has two different links added. Click Save.
- Go to the first browser tab and copy the url from the address bar.
-
Go to the second browser tab (the one you are using for editing) and open the Rich Text Editor.
- Place the cursor where you want the hyperlink and click on the hyperlink icon.
- Add the Text to Display.
- Then for the Address, paste in the url you copied in step 4.
- Remove the first part of the url up to the first “/” to make it a relative url.
- At the end of the url add a # sign and then the name of your tag from step 3.
-
Click Ok and Save.
- Now your link should work and take you to the place in the document where the anchor is. Remember that the anchors and links don’t have to be in the same Content Editor Web Part but just need to be on the same page.
Thank you!!! Is there any way to link to the title for the content editor web part? It’s not exposed in the source code block.
Hrmmm still can’t believe this simple feature isn’t included out of the box.
This does work on MOSS publishing pages which has a more useful hyperlink control, following the following steps
Step 1: Go to the area of the page you would like the link to appear and select a word (this means you can find the link later for editing if need be) and click the “new hyperlink button”
Step 2: Enter a value in the bookmark field only – we shall call this the ID (as it gets inserted in the ID tag of the anchor)
Step 3: Go to the area of the page you would like to link from, type in the link text select it and click “new hyperlink”
Step 4: Fill in the address of the hyperlink with #ID, where ID is whatever you called your previous bookmark and # is a hash symbol.