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
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.
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.
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.
Run a Acquia Optimize report to check for any broken links left by deleted anchors to ensure a good accessibility and QA score.
Create the Anchor Link
- Highlight the word or paragraph where you want the link to jump.
- Click the anchor icon in the WYSIWYG toolbar.
- Enter a relevant word or phrase for the anchor. This is what we will add to our URL.
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.
- Anchor links URL are not created automatically so you manually have to create the anchor link URL by adding a hashtag (#) in front of the anchor word and add it to the page’s URL (e.g., https://dxtraining.iowa.gov/resources/about-project#state
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.
