Anchor links

What is an anchor link?

An anchor link, also referred to as a page anchor or jump link, is a type of hyperlink employed within a webpage to guide users to specific sections on the same page.

How do I add an anchor link to my page?

You can add anchors to WYSIWYGs and to Section Intros. Anchors must be accompanied by other content for them to work.

Steps

Click the Source button on the WYSIWYG editor or section intro editor
Add an HTML tag: <div id="anchor_name"> on the place you want to link to.
Use the anchor URL by combining the page URL + "#" + anchor_name

Example

Create an anchor name, for example: stage1 to append to the page URL
Your page URL: https://drupalguide.slac.stanford.edu/get-started/5-things-do-launch-your-site
The URL to new anchor: https://drupalguide.slac.stanford.edu/get-started/5-things-do-launch-your-site#stage1

I can’t get the anchor to link to the right spot. How can I get this to work?

Because of the sticky navigation, the anchor destination might change, so you’ll need some trial and error to identify the best position to add the <div id="anchor"/>.

Tip: It is best not to test the anchor links as an editor but rather as a visitor (i.e. from an Incognito window for public sites or masquerading as a test_view for internal sites) to get a truer sense of the destination.

Note: Anchor links are not functional within the Accordion Paragraph Type (PT), meaning that clicking on a link leading to content within an Accordion is not supported. Nevertheless, you have the option to insert a link using the WYSIWYG editor within the Accordion PT to direct users to either internal or external web pages.