Overview
Have you ever wanted to drive users to a different part of the page without using an anchor tab? Have you ever wanted to create a table of contents that jumps users to a different section? Want to reference a previous or future section of your page?
Check out this article from Utah to see how it works, then scroll down to find a step-by-step guide!
1. Find the spot on the page you want to link to.
You'll need to find a spot that is either a rich text editor, or has a the Source Edit button in the text editor toolbar.
If you want to take visitors to a component that doesn't have that option, an image or video, or example, you can select the component above it if it does.
2. Open the text
Open up the component to edit. Find the spot where you want users to go to, then switch the view to "Source Edit."
When you're seeing the HTML version of the component, paste in the below copy on the spot you want users to be taken to (for example, if you want users to be taken to the top of a text asset component, paste this on the first line):
<p><a name="KEYWORD" id="KEYWORD"></a></p>
In lieu of KEYWORD, select a word that makes sense in the article. For example, if you're taking them to a section about climate change, use "climate" paste this:
<p><a name="climate" id="climate"></a></p>
Users will be able to see this keyword in the URL bar, so make it logical. We recommend that you make the keyword all lowercase.
In this example, you can see the Source Edit button highlighted at the top, and the code highlighted at the bottom. In this example, we want users to be taken to the bottom of the RTE component, right above the video on the page.
3. Add the link on the page
Now that the code has been added to the spot you want users to land on, you can now create the link that will take them there.
In the path picker area, simply add, “#KEYWORD” to field. Using the climate change example from above, you would simply input:
#climate
NOTE: your keyword is casesensitive! We highly recommend that you write your keyword in all lowercase. This will then send users straight to the spot where you placed the anchor code.
Continuing from the example image above, we want to send users to the “Nichole” line of code. Make sure the dropdown is set to “Target.” In this example, we want the link to live in a Callout component nested in a Text Asset Component.
Important Notes
- Never use these links in a Related Articles component, even one in a text asset component. Only use these links in a line of text. If you want to use them in a menu-like option, we recommend a text asset component with a callout component nested inside (like on this page).
- Adding this component to a page can impact your spacing, so please be sure to double check the finished product after you add the line of code.
- The keywords are case sensitive. Make sure when you're creating the link to the anchor spot, you're using the correct case.
- Ideally, you'll want to enter the code below a </p> and above a <p> marking. If you need help finding a place to paste this, email lane.horter@tnc.org.
- HTML can be tricky, so please be mindful of what you change when in Source Edit mode.
- If you have any questions on using this workaround, please email lane.horter@tnc.org.
Related Content
Choosing the Best URL for Your Page
Guidance on how to choose a good URL for a page on nature.org.
How to Link Directly to an Anchor Link
Create a link directly to a section of a webpage using anchor links with unique URLs. Find out how!
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.