Anchor Links

Available on
CKEditor 5
Faculty Sites
Sites+

With anchor links, it's possible to link to a specific section on a web page. Creating anchors is done in two parts: setting the anchor, then making a link to the anchor.

Anchor links should be used judiciously. They are most effective for when lots of content must be on the same page. When considering using anchor links, consider if it would work better to split the content over multiple pages. 

Create the anchor

Headings are often the best place to set the anchor. Type out the heading and highlight the text. Then click the flag button in the toolbar.

How to select the heading then find the anchor button in the toolbar

The dialog to name the anchor

The anchor name should be:

  • Short
  • All lowercase
  • One word (use dashes or underlines if multiple words are needed)
  • Unique per page
  • Relevant to the section

Good example: current-students

Bad example: Documents and Guides for Current Students

An anchor will be delineated with a small, red flag icon. This only shows up in the editor, not the published page.

The little anchor flag next to an existing anchor

Edit an anchor by clicking in the anchor text and clicking the flag button in the toolbar. To remove an anchor, place your cursor just to the right of the flag icon, then backspace twice.

Link to the anchor with anchor link button

Create a link as by typing the link text, highlighting the text, then clicking the anchor link button in the toolbar.

In the anchor link dropdown, select the desired anchor from the list of anchor names.

The anchor link button is to the right of the anchor button in the toolbar

Existing anchors show up in the dropdown

Link to the anchor with link button

Alternatively, you may link to the anchor using the regular link button. Like before, highlight the link text, then click the regular link button in the toolbar.

In the link pop-up, type a #, then the name of the anchor. For example: #section-2. Hit the green checkmark when you’re finished.

You can make an anchor link by hand with the regular link button

Back to top

There is already an anchor built into all pages with the anchor name top. To make a 'back to top' link, create a link following the same steps from the section “link to the anchor with link button,” but enter #top in the URL field.

Make a 'back to top' link with the link button

Linking directly to anchors with an external link

If you want to link to an anchor on a page from another website or email, add the anchor name to the end of the page url

https://mysite.iastate.edu/my-page#section-1

When a user clicks the link, they'll land directly on that section.