Purpose

Anchor links help users navigate directly to a specific section of a page without scrolling through all the content. They can be used in text and H2 text and they’re useful when you have a page with a lot of information and want readers to go straight to the section that answers their question. Anchor links are an alternative to the Table of Contents jump link on a Basic Page.

When to use Anchor Links

  • You have a long page with multiple sections.
  • You want users to jump to a specific section on the same page or another page.
  • You want more control over where the link directs readers, rather than relying on the automatic Table of Contents feature.

Elements of an Anchor Link

  • Anchor Icon: The button in the WYSIWYG toolbar that allows you to create an anchor.
  • URL with Hashtag: The full URL of the page, combined with the hashtag (#) and anchor label, to direct users to the anchored section 
Example of an anchor link

Here is an example of an anchor link that was created to lead to the third paragraph on our About Projects page at https://dxtraining.iowa.gov/resources/about-project#state.

Creating an anchor link

Anchor links for Microcontent Accordions

To create an anchor link inside of an accordion you can follow the same method that is used above the only difference is that the anchor link, which is what will go in the Linkit tool, will be whatever the page node/number is that the accordion is embedded on plus the "#" hashtag and anchor word added after.

For example, I have my accordion embedded on a page called Testing features and the node/number for that page is (/node/504) so all I would need to do within my Linkit tool is add my anchor tagged text.

How to create an anchor link

That will now be a link that will lead people to the page where the accordion is embedded within and the exact spot inside the accordion where I have the anchor tag at.

Removing an Anchor Link

To delete an anchor link, select the link text and click the tiny "unanchor" flag button.

Removing an anchor link

Run a Acquia Optimize report to check for any broken links left by deleted anchors to ensure a good accessibility and QA score.

1

Create the Anchor Link

  • Highlight the word or paragraph where you want the link to jump.
  • Click the anchor icon in the WYSIWYG toolbar.
Anchor link on the toolbar
  • Enter a relevant word or phrase for the anchor. This is what we will add to our URL.
Where to create the anchor link
2

Build the Anchor Link

Anchor links work differently than the Table of Contents links, which use the H2 heading and have their URL links created automatically.

Link text URL
3

Place the Anchor Link

On the new page, go to the area where you want to add the link and then with the link tool, paste the anchor link URL with the “https://” to make it work because anchor links act as an external link. Then click the green check mark to save.

Create the anchor link