Agencies
Services
How To Use Anchor Links
Anchor links are hyperlinks that send users to specific content on the page that isn't necessarily at the top. Users may be directed to different pages or may create anchor links for traversing content on the same loaded page.
We're using anchor hyperlinks on this page, with the CTA items underneath. In AEM, you can apply anchor links to any hyperlink, button, or CTA.
Introduction
Anchor links are hyperlinks that allow you to link to specific sections on a URL. We're using them on this page, in the CTA links at the top of this page. In AEM, you can apply anchor links to any hyperlink, button, or CTA.
Let's look at how to author an anchor link.
An anchor link is configured through two elements:
- Label: To set up an anchor link you must first add a label to the title of the section you want to link to.
- Link: Setting up anchor links require some customization to insert the label to your URL.
Adding Labels to Titles
Add a Unique Label
If you are using multiple anchor links on a page, it's important that you take care to give each section a unique label. Anchor tags will not work if there is more than one label with the same name on a page.
Adding the Label to a Title
The best practice is to add the label to the Title component of the section you want to link to. This will help you quickly find labels when editing at a later time.
Once you've planned out your labels for the page, adding it to the title is easy. Just insert your label, in all lowercase, into the ID field of the Title component, as shown here in the image below.
Configuring Anchor Link URLs
Once your Titles have their ID Labels in place, it's time to build your links. As mentioned, you can apply the anchor link to any CTA, hyperlink, or button by authoring as usual.
If adding a hyperlink to the page that you are editing, then when you add your URL, use the AEM browser to pick the page that you are currently editing. Once you select the page that path will look something like this:
Before you SAVE the hyperlink, you need to adjust this URL by doing the following:
- add ".html" to the URL path that you selected
- Then, add a # symbol followed by the label you want to link to. If I want to link to a section with the ID Label of "examples" I would add "#examples" to the end of my URL, after the ".html" that I added previously.
Here's how your new URL should look after editing:
It's that easy! Save your link, publish your page, and now your hyperlinks should link to the precise section of the page where you want to direct your audience.