Anchor Link
The Anchor Link component inserts a tiny piece of code that allows you to link to a specific location on a web page.
Uses
An anchor link is a tiny piece of code that is appended to a hyperlink. The anchor allows you to link to a specific location on a page.
If a web page URL is like an apartment building address, then the anchor is like your apartment number – a specific location within that address.
Anchor links are often used with the Anchor Navigation component, which allows visitors to easily navigate a long web page. For example, this page has anchor navigation pointing to anchor links for Uses, Best practices and Accessibility. Click on an item in the anchor navigation and it will take you directly to that section of the page.
Best practices
When to use an anchor link
- Anchor links work best on long pages that would otherwise be difficult to navigate.
- Don't use anchor links on short pages that are simple to navigate.
- In general, avoid using an anchor link to another page because the change in context may confuse the visitor.
Set up an anchor
- In the AEM Sidekick, expand the Concordia section.
- Drag the Anchor Link component to the appropriate place on your page.
- Give it a simple URL-friendly name (lower-case, no spaces). For example:
- support
- advisors
- bestpractices
- best-practices
This is called the anchor ID.
- Now you'll need to link to the anchor ID. The method varies a bit depending on the situation.
(a) To link from text in a WYSIWYG to an anchor on the same page:
- Open the WYSIWYG component.
- Highlight the relevant text.
- Click the hyperlink icon.
- Enter # followed by the anchor ID:
(b) To link to an anchor on another page, enter the URL followed by # and the anchor ID:
(c) If you're linking from an Anchor Navigation component, add only the anchor ID.
- Click OK.
- Test the anchor link by clicking on it. You may have to activate the page to do this.
- If your anchor link doesn't work, it's usually because the anchor ID doesn't fully match the anchor link. Carefully examine the anchor ID and the anchor link, and resolve any differences.
