Anchor Tags

Anchors can be done in two different ways in Cascade.

  • A link can anchor directly to a widget;
  • A link can anchor directly to text by placement of an anchor tag, which is primarily used with wysiwyg text areas.

Linking to a widget

Every widget has a section id, which basically serves as a built-in anchor tag. In order to link from text to the top of a widget, you will need to know the section id.

Finding the ID
  1. On the page containing the widget, right-click and select ‘inspect.’

    Shown on the left side is a list of topics that are all hyperlinked. The right side shows the Inspect option highlighted.
     
  2. Select the Select an Element button in the top left of the Inspect window:

    The inspect window with the inspect element option highlighted.
     
  3. Once that is selected, hover over the page text on the left and go to the widget that you want to find.

    The inspect window is shown with the FAQs header highlighted on the left side of the window.
     
  4. In the Inspect area on the right, you will find the corresponding code that goes with FAQ widget.

    The inspect window is shown with the section id corresponding with the accordion widget (accordion_4) is highlighted.
     
  5. The section id is accordion_4. This is what will be used to code the anchor.
     
  6. The FAQ link will be coded to link to the top of the FAQ accordion widget using the section id of accordion_4. Highlight the FAQ text and create a hyperlink.

    The hyperlink icon in the menu bar is highlighted.
     
  7. In the hyperlink panel, it will be set as an internal link because it’s linking within the same page. In the anchor field will be the name of the section id, which is accordion_4.

    The insert link window is shown with the Internal link type and the anchor field highlighted. Accordion_4 is in the Anchor field.
     
  8. Once everything is saved, be sure to test it. What you should see is the FAQ link should move the page down to the top of the FAQ accordion.


 

Link using an Anchor tag coded directly in the text

  1. In this example, we want to link the ‘Duties of PIs, the institution, and the IBC’ to the corresponding header.

    There is a line connecting the Duties of PIs link to the top of the Duties of PIs header.
     
  2. Place your cursor to the left of the ‘D’ in the word ‘Duties’ and Select Insert from the top menu and then select ‘anchor.’

    In insert dropdown shows the Anchor option. The header, Duties of PIs is highlighted.
     
  3. On the Anchor window, type in the name of the Anchor you want to assign. The name can be anything that makes sense to you. In this case, the word Duties has been assigned as the anchor.

    Add anchor field with the word Duties in the ID field.
     
  4. Now, there will be an anchor tag symbol next to the word Duties.


     
  5. Navigate to the text that is to link to the newly created anchor, and create a hyperlink. Similar to the previous example, the link will be an internal link, and the anchor will be the name assigned above, which is Duties.

    The insert link window is shown with the Internal link type and the anchor field highlighted. Duties is in the Anchor field.
     
  6. Test your link to ensure it takes you to the correct location in the document. In this case it’s the ‘Duties of PIs, the institution, and the IBC’ header.

 

Was this helpful?
0 reviews
Print Article