Creating an Anchor link

Have more questions? Submit a request

Anchor links take customers to a specific section within a web page, making it easier and quicker to navigate to the relevant information. You can link to anchors within the same page or to other pages you manage.

Anchor links are especially helpful when the web page is long to help users navigate the content. Anchor links can replace text that says ‘see below’ by instead using descriptive text and linking to the exact passage of content being referred to.

If you meant a vanity URL

Vanity URLs are different to Anchor Links. A vanity URL is a short URL that takes customers to a web page. It's helpful for promoting that web page in other marketing collateral. If you need a vanity URL created, submit a request for support from a Content Administrator on our form.

How Anchor links work

Anchor links are unique. When you look at a URL with a hash sign (#) and a word after it, it is an anchor link. Here's an example:

https://www.nsw.gov.au/covid-19/business/rules-guidance/ventilation#toc-why-ventilation-is-important

This URL tells the browser to first load the page and then scrolls the anchor location to the top of the screen.

How do I create an Anchor link?

To create an anchor link you'll first drop an anchor within your page, then you'll create the link that goes to the anchor.

Create an anchor

Follow the steps below to create an Anchor:

  1. Inside a WYSIWYG content block, you will find a Flag icon in the toolbar.

    The flag icon highlighted to the right of the link icon.
     
  2. Position your cursor where you want to place the anchor. Do not highlight the word.


     
  3. Click the flag icon to add your anchor.

    The flag icon can also be selected with the keyboard shortcut control plus m.
     
  4. Label your anchor with a brief, relevant label in lower case. If your label is more than 1 word add the – symbol between words, for example, 'about-us'.


     
  5. Text will be added on the editor where you placed the anchor and the anchor/flag icon will be highlighted in blue. (This additional text will not appear on the live page).

    'Invisible anchor' appears on the spot where the anchor link was created.
     
  6. You have created your anchor and can now create the link to the anchor.

Creating a link to your anchor

  1. Highlight the text you want to add the link to, and click the link icon.

    The text 'about this landing page' is highlighted before clicking on the link icon.
     

Linking to anchors in the same page

If you are creating an anchor link within the same page follow these steps:

  1. Select the text you would like to link to then enter # and the exact name of the anchor you just created. 

    A text highlighted with the hash symbol inside the Link URL window. The anchor link is typed as #test-anchor.
  2. Click on the green tick to create your Anchor link. The Anchor link will be successfully created when you see a pop up menu below the link.

The highlighted text has become a link with the anchor link popped up underneath it.

Linking to an anchor in another page

If you're creating an Anchor link to another page, follow these steps:

  1. Select the text you want to link to. In the link URL box, start typing the name of the page you want to link to. A list of pages will appear using the text in the box so be as specific as possible when searching.

A text highlighted with the Link URL window popped up on top of it.

2. Find the page you want to link to and click on the page to select.

The text 'another page' typed on the Link URL field. A dropdown list of a matching page is shown.

3. To link to a specific Anchor link on the page, type # and the Anchor link name at the end of the URL. Ignore the message 'not being found'.

The text 'Another page#anchor-link is typed on the Link URL field. No results appears under the field.

4. Click on the green tick to create the Anchor link.

Save your page and test that your Anchor link jumps to the anchor on the correct page. You may need to move your anchor if there are formatting issues or it isn't jumping to the exact place you'd like.

Related information

  • Learn more about using links on nsw.gov.au to make effective use of Anchor links.
  • The in page nav is a similar component that automatically uses anchor links to help customers navigate a page. Find out more about the in page nav

Need any more help?

If you have any questions, or require assistance with anything mentioned in this article, submit a request via the webform.

Articles in this section

Was this article helpful?
1 out of 1 found this helpful