Linking to on-page anchor links

How to link to a component or other content within a page

To link directly to a specific component or content within a page, you need to create a unique ID for the component that you can reference in links. We recommend using only lowercase letters, numerals, and hyphens (-), for example, “department-donors”.

Step 1: Create anchor link

Create an anchor link within text

Click on the #ID icon in the text editor
Enter the anchor id in the Element ID field.

screenshot of the text editor toolbar and the #ID field selected — To add an anchor link to text within the page, enter a descriptive ID in the **Element ID** field of the text editor toolbar.

Create an anchor link on a component

Locate the Page Anchor Link input field under the Block Settings or Settings tab for components and component content.
Enter the anchor id in the Page Anchor Link field.

Screenshot of Block Settings tab panel showing display setting options with the Page Anchor Link input outlined — To add an anchor link to a component or component content, enter a descriptive ID in the **Page Anchor Link** input field. This example screenshot is from an **Accordion** component.

Step 2: Link to an anchor link

The method for linking to an anchor depends on the source of the link. This example describes how to create a text link using the editor toolbar.

Select the text to link from the text input area.
Select the Link button in the editor toolbar (see Text Editor for details about using the toolbar and text input area).
Enter the first few letters of the name of the content, for example, “History” to link to the History of the Department page or “Grace C” to link to the Grace Chan person page. Select the desired content from the autocomplete Content menu (see Internal Links for guidance on linking content within a site).
Add “#” followed by the page anchor link ID created in the content, for example, “history#department-donors” to link to https://drupaldemo.harvardsites.harvard.edu/history#department-donors.