Anchor links can help you avoid adding unnecessary short pages to your site. On this site, they serve as a de facto table of contents for many pages. Anchors are also useful for building glossary or index pages (for example, see the A – Z Index on the School of Medicine site). They can take visitors further down on the same page or to a specific location on a different page within the same site/
Just keep in mind: Jumping to an anchor link can be disorienting for visitors, especially if the link points to an anchor on a different page.
If you’re editing a page/content that doesn’t use blocks, you can still add anchor links using HTML.
Creating a jump/anchor link is a two-step process.
1. Place the anchor
The “anchor” is the spot on the page you’re linking to.
- Select the block you’d like to use as an anchor.
- Heading, paragraph, image and list blocks can all serve as anchors, while cards, callouts and billboards cannot.
- Navigate to the block settings in the right sidebar and select Advanced. In the HTML anchor field, give your anchor a name.
- Anchor names should be brief (just one or two words) and avoid using spaces (hyphens are fine). They’re also case sensitive, so keep that in mind for Step 2.
2. Add the jump
After the anchor has been added, you can create your jump link.
- Highlight your jump link text and click the link button in the toolbar to format your link, just as you would to add any other link.
- If the link is on the same page as the anchor, enter the URL as a pound sign followed by the anchor name (no spaces):
- URL format: #anchor-name-here
- URL example: #step-two
- If the link is on a different page from the anchor, enter the page URL, followed by the pound sign and the anchor name (no spaces)
- URL format: http://yoursite.wustl.edu/page-url/#anchor-name-here
- URL example: https://webtheme.wustl.edu/items/basic-html-code-for-wordpress/#intro
- Apply the link, then preview the page to test that it works.
- Click Update to save your changes.