Anchor Link Instructions

An anchor is a unique ID placed on a specific element so a link can jump directly to that location and optionally trigger behavior. When a user clicks a link containing that ID, the browser navigates to the element with the matching anchor.

To test anchor links and see how they function, visit the mockup page below. This page is hosted on a test environment, so access requires the Cal Poly Pomona's VPN (Virtual Private Network).

Anchor Link Mockup

 

Page View

Cascade View

Adding Anchor Tag IDs


Page View


Cascade View


 

  1. In Cascade, navigate to the section where you want users to jump.
  2. In Content Options, enter a value in Custom Section ID (Anchor Tag ID).

 

Cascade View


 

 

Adding the link

  1. Go to the content area where the link will be placed.
  2. Insert a hyperlink.
  3. In the Anchor field, enter the custom section ID you created.

Page View

 

Cascade View

 

 

  1. Navigate to the section where you want to add the anchor.
  2. In the section content editor, place your cursor where the anchor should appear.
  3. Click the bookmark icon and enter a custom anchor ID, then save.

 

Cascade View

 

 

Adding the link

  1. Go to the content area where the link will be placed.
  2. Insert a hyperlink.
  3. In the Anchor field, enter the custom anchor ID you created.

Page View

 

Steps to link to an accordion item

  1. In Cascade, locate the page module where the accordion is placed.
  2. Identify the module number that contains the accordion.
  3. Use the format #accordion-tracker--[module-number]-[accordion-item-number] after the base page URL.

 

Cascade View

 

 

Example

If the accordion is in Module 4 and you want to link to the first accordion item, use: #accordion-tracker--4-1.

The first number represents the module location, and the second number represents the accordion item within that module.

Adding the link

  1. Go to the content area where you want to place the link.
  2. Insert a hyperlink.
  3. In the Anchor field, enter the accordion anchor ID (for example: accordion-tracker--4-1).

Notes

  • Individual accordion items use system-generated default anchor IDs and cannot be customized.
  • You may assign a custom anchor ID to a section (see Custom Anchor ID for Section), but not to individual accordion items.
  • If needed, you can identify the accordion anchor ID by inspecting the page in your web browser.