Anchors are an easy way to link to a specific section of a web page. You can create an anchor anywhere on a page, and then link to it from the same page or another page.
Creating an Anchor
Linking to an Anchor from the Same Page
Linking to an Anchor from a Different Page
Creating an Anchor
- Find the section you want to link to. Place your cursor at the beginning or end of the section’s heading.
- Click on the flag icon to open up the Anchor Properties dialog box.
- Enter a name for your anchor. The anchor name should describe the section where the anchor is placed. Not sure what to write? Use the same text as the heading.
Tip: If you are planning to link to the anchor from a different page, be sure to note the name you’ve given the anchor in the Anchor Properties dialog box – you’ll need to use it later.
- Click OK. A red flag will appear where your cursor was positioned. This means the anchor has been created.
Next, you’ll need to link to the anchor from the same page or a different one.
Linking to an Anchor from the Same Page
- Highlight the text that should link to the anchor.
- Click on the link icon in the tool menu (it looks like a small chain-link):
- In the box that pops up, click on the Link type drop-down menu and select Link to anchor in the text.
- In the By Anchor Name drop-down menu, select the name of the anchor you created. If you can’t find it in the drop-down list, revisit the steps above to ensure your anchor has been created.
- Click OK.
- Save your changes to the page. The link you just created will now lead to the anchor, as in this video:
Tip: Remember to test the link once you’ve saved the page to make sure it’s working properly.
Linking to an Anchor from a Different Page
You can also link to anchors from a different page. Here’s how to do that:
- Follow the steps in Creating an Anchor.
- Navigate to the page from which you want to link to the anchor.
- Highlight the portion of text (anywhere on the page) that you want to link to the anchor.
- Click on the link icon in the tool menu (it looks like a small chain-link):
- In the URL field, enter the relative URL of the page where you created your anchor (i.e., /page, not https://department-pat.iit.artsci.utoronto.ca/page).
- After the relative URL, enter a # symbol followed by the name of your anchor. It’s OK if there are spaces in the name of your anchor, but do not include spaces on either side of the # symbol.
- Click OK.
- Save the changes to your page. The link you just created will now lead to the anchor, as in this video:
Tip: Remember to test the link on your front-end page to make sure it’s working properly.