What is an Anchor Link?
An anchor link is a type of link. It moves you to another location within the same page you were already on. An anchor link can also take you to a specific spot on a different page.
How Does an Anchor Link Work?
There are two key steps to creating an anchor link: setting the 'anchor' and creating the 'link.'
-
Anchor—This is a designated spot on a page, marked with a unique ID that you create. When someone clicks the anchor link, they will be taken to this spot on the page.
-
Link—This is the hyperlink that users will click to navigate to the anchor.
In gloss section components AND all other components with link fields, you'll find an additional field specifically for anchors. In the gloss section component, this field is located under the 'Advanced' tab.
University of Utah Health is an academic medical center. Learn more about us.
Steps to Create an Anchor Link
Step 1, Set the Anchor
-
Determine the Anchor ID: Choose a unique ID for your anchor link. For example, if you want to anchor to a section about student resources, your anchor ID could be ‘student-resources’.
-
Note: The anchor ID can be anything—one letter or several words. Ensure that if you have multiple anchors on the same page, each ID is unique. Anchor IDs should be lowercase. Separate each word with a hyphen. Ex: why-u-of-u-health.
-
Enter the Anchor ID: Type your chosen anchor ID into the ID field of the Gloss Section containing the information you want to link to.
-
Save the Component: Save your changes to the component.
Step 2, Create the Link
-
Enter the anchor in the link field: Go to the component where you want to create the link. In the link field, type the same anchor ID from step 1, prefixed by a #. For example, if your anchor ID is student-resources, enter #student-resources.
Note—The # symbol is essential; without it, the link will not work.
-
Specify the URL: In the URL field, link to the page where the anchor ID is located. For example, if the anchor ID was set on a page called Student Success, make sure the URL field points to that page.
Reminder—Anchor links can be used to navigate within the same page or to specific sections on different pages.
-
Save Your Changes: Save the component with the new link and you’re done!
