Home / Creating & Editing / Anchors

Creating and Editing Anchor Links

You can embed anchor links to other areas within a page in your content, using the Link and Anchor Link functions in the WYSIWYG editor. See our Links page for more information about links.

Inserting Anchor Links

An anchor link is the same as a standard link, except that it points to a location on the same page instead of linking out to another page. To use an anchor link, first, there has to be an anchor in your target page (usually attached to a sub-heading or image). Then you can set up a link from another page (or within the same page) pointing to that anchor location. 

Creating an Anchor in Your Page

  1. Position your cursor where you want the anchor placed. Typically, this is the main content point in your page, like a sub-heading. the WYSIWYG editor with the anchor icon highlighted in purple
  2. Click the "Insert/edit anchor" icon in the WYSIWYG editor. 
  3. Enter a short Anchor Id (name) that describes the target anchor. This Id will be used in your link, so it should be lower case, and as short and clear as possible. The insert anchor dialog box with the id field highlighted in purple
  4. Click Ok.
  5. In the WYSIWYG editor, you will now see the "anchor" icon where you placed your anchor. You can also see this by going into the Source Code viewer - an anchor tag looks like: < a id="anchor name"></a> The WYSIWYG editor contains text that say 'This is the example anchor text' with the anchor icon highlighted in purple between 'the' and 'sample'.
  6. Now you need to create a link to that anchor. Highlight the word that one would click to get to the anchor (e.g. the "F" in an A-Z index list) The WYSIWYG editor contains text with that says 'Link to sample anchor' and he Insert/Edit Link highlighted in purple
  7. Click the "Insert/Edit Link" icon
  8. In the Insert/Edit Link box that appears, be sure the "internal" checkbox is selected.
  9. Leave the Link field blank (don't link to another page).
  10. In the "Anchor" field, type in the anchor id exactly as you named it (in step 3 above). Insert/edit link box with the Link Source's internal option checkmarked, the Anchor field containing 'sample anchor name', and Ok button highlighted in purple
  11. Click "Ok"
  12. Click "Preview Draft", and then submit your changes on that page.

Linking to an Anchor in Another Page

  1. Verify that the anchor exists in the target page (see above: Creating an Anchor in Your Page)
  2. In your page where you want to insert a link, select/highlight the text that you want to be a link.
  3. Follow the Links instructions on "Embedding Standard Links," except this time enter the short name that you created for your anchor in the "Anchor" field. This is the Insert/edit link popup window in the WYSIWYG editor. The fields listed are Link Source with Internal and External checkboxes, Link, Anchor, Text to display, Title, Target, Class. The fields that are highlighted in purple are the Internal checkbox in next to Link Source, a 'Choose File, Page, or Link' next to Link, 'sample anchor name' in the textbox next to Anchor, 'Link to sample anchor' in the textbox next to Text to display. The bottom right hand corner has Ok and Cancel buttons. The Ok button is blue and also highlighted in purple.
  4. In the WYSIWYG editor, your link will look the same as a standard link, but it points to the middle of a page, instead of the top of the page. You can see the special code for an anchor link by going into the Source Code viewer - an anchor link looks the same as a standard link, but it has "#anchor name" at the end.
  5. Click "Preview Draft", click "Submit" to save your page, and test your link.
Removing (Breaking) Links
  1. Edit the page, and select/highlight the text or image that has the link you want to remove.
  2. Click the "Remove Link" icon in the WYSIWYG editor. The Remove Link button in the WYSIWYG editor and a link called WYSIWYG highlighted in purple
  3. This removes the link from your text or image. It should now appear the same as the rest of your content.

"Back to top" links
When you create a "back to top" link, instead of creating an anchor named "top" you create an anchor called "content" (don't include quotes). Then link the "back to top" text to the anchor named "content". 

See Also