Skip to content
and small shed with beehives sits in front of a field of goldenrod under a blue sky
Pollinator Hotel Native pollinators thrive when the goldenrod blooms from late August to October. © Lily Mullock/TNC

AEM Support Docs

Create a Direct URL to an Anchor Link

by adding a #anchor-title to the end of the URL

December 28, 2021

In December 2020 (view release deck), we updated the Anchor Links component (C56) in AEM to allow for direct linking to individual anchors. In other words, you can "deep-link" to a section of a page by linking directly to an anchor. Learn how to construct a direct link to an anchor following the steps layed out below. 

 

Slide from December 2020 Release Deck The slide sums up the basic process of creating a direct link to an anchor, detailed below. © TNC

How to Link to an Anchor

Use the URL and add a #title-of-anchor to link to deep-link to the anchor.

  1. Add anchor links to your page

    Use the C56 Anchor Links component on your page. To deep-link without using anchors, check out our guide to building manual anchor links.

  2. Copy the URL of the page

    Copy the full URL from the address bar

  3. Add #title-of-anchor

    Add to the end of the URL a "#" followed by the title of the anchor, with all words in lower case and separated by dashes. (E.g. https://digital.nature.org/resources/web/aem-support-docs/links-directly-to-anchors/#steps-to-build-url)

  4. Ignore punctuation, convert special characters

    Punctuation is ignored: U.S. State Programs = #us-state-programs; Ampersands become the word "and": Ethics & Compliance = #ethics-and-compliance

  5. Test your new URL!

    Make sure to try out your hand-crafted deep-link to ensure that you did everything correctly and didn't accidentally include a capital letter or special character in your URL!

Try out these examples: 

Deep-link to the "Our Members" section of the Shellfish Growers Climate Coalition page: 

https://www.nature.org/en-us/what-we-do/our-priorities/tackle-climate-change/climate-change-stories/shellfish-growers-climate-coalition/#our-members

 

Deep-link to the "new vs. same tab" section of the Links on TNC Properties page: 

https://digital.nature.org/resources/web/aem-support-docs/links-on-tnc-properties/#new-vs-same-tab

Related Content

close up of a yellow flower speckled in red
Choosing URL

Guidance on how to choose a good URL for a page on nature.org.

The Nature Conservancy's Panther Knob Preserve in West Virginia.
Manual Anchor Links

How to create a link on your page that will jump users to a specific section of that same page.

pollen covered honeybee hovers next to bright magenta flower with yellow center
Links on TNC Properties

External link? Set that full URL to open in a new tab. Internal Link? Use the Relative URL and set it to open in the same tab.

VIEW MORE