How to Link to Specific Parts of a Page

What is an Anchor Link?

An anchor link takes a user directly to a specific section on a web page, either on the page they are already on or to a specific section on a different page.

Anchor links are made of two parts: a target ID and a link/href.

Target ID

The place an anchor link links to is denoted by a target ID — an HTML ID attribute that marks a specific section on a webpage. HTML IDs must:

• Contain no spaces
• Be unique (no matching IDs can exist on the same page)

An anchor with a target ID must be included at the destination on the webpage you want to link to for an anchor link to work.

In Cascade, there are built in fields for you to use to create anchors with target IDs within most Aggie UX components.

Link (href)

The clickable link includes the anchor’s target ID behind a hashtag symbol (#) in the href attribute. If linking to a section on a different page, the link will also include that information.

In Cascade, there are built in fields for you to use to include the target ID in your anchor links that do not require you to edit HTML.

How to Make an Anchor in Cascade

You can add a target anchor to most Aggie UX components.

For Components with Freeform Content

A few Aggie UX components — such as custom content or accordion groups — include a WYSIWYG editor that allows you to create anchors within the text. For these components:

1. Open the page that contains the section you wish to link to in Cascade
2. Click Edit
3. In the page builder, open the Section you wish to link to
4. In the WYSIWYG editor (typically labeled “Freeform content”), put your cursor where you want to users to be directed to
5. Click the bookmark icon (labeled “anchor”) to insert an anchor
6. Enter a unique ID in the Anchor ID field
7. Click Okay
8. Click Preview Draft
9. Click Submit

For Components with Structured Content

Many Aggie UX components that don’t include a WYSIWYG editor — such as callouts or card groups — have the ability to create custom anchors that allow you to link directly to them. For these components:

1. Open the page that contains the section you wish to link to in Cascade
2. Click Edit
3. In the page builder, open the Section you wish to link to
4. Select Yes under the question “Use a custom anchor row?”
5. Enter a unique ID in the Custom Row Anchor field
6. Click Preview Draft
7. Click Submit

How to Link to an Anchor in Cascade

You can add an anchor link to any Aggie UX component that allows for links.

For Components with Freeform Content

A few Aggie UX components — such as custom content or accordion groups — include a WYSIWYG editor that allows you to create anchors within the text. For these components:

1. Open the page that you want to have an anchor link in Cascade
2. Click Edit
3. In the page builder, open the Section you wish to link from
4. In the WYSIWYG editor (typically labeled “Freeform content”), highlight the word(s) you wish to link
5. Click the link icon (labeled insert/edit link”) to insert or edit a link
6. Set the link type and link source (note: if you are linking to a destination on the same page, you will still need to set a link to that page)
7. Enter the target ID in the Anchor field
8. Click Okay
9. Click Preview Draft
10. Click Submit

For Components with Structured Content

Many Aggie UX components that don’t include a WYSIWYG editor — such as callouts or card groups — have the ability to create custom anchors that allow you to link directly to them. For these components:

1. Open the page that contains the section you wish to link to in Cascade
2. Click Edit
3. In the page builder, open the Section you wish to link from
4. Set the link type and link source (note: if you are linking to a destination on the same page, you will still need to set a link to that page)
5. Select Yes under the question “Would you like to link to a specific section on the destination page?”
6. In the field that appears below, enter the anchor ID for the section you’d like to link to
7. Click Preview Draft
8. Click Submit