Boost recurring donations this giving season with the new upsell prompt!Learn How >>

Create Anchor Links

updated

Anchor links are hyperlinks that link to another part of the same page (usually lower down the page) so that visitors don't have to scroll to see content.

To make an anchor link:

  • Open the content item within which you'd like to place the anchor/link combination and enter all the text you want
  • Place your cursor where you wish to link to on the page. This is where the anchor will be placed.
  • On the toolbar of your Editor, click on the Anchor icon
  • In the pop-up window, in the Anchor Name field, enter a name for this anchor
  • Click Insert
  • Verify that the anchor has been inserted by locating the small anchor icon placed in the Editor where your cursor was positioned

To add the link to the new anchor you created on the same page as the anchor:

  • Select the text you wish to link from
  • Click Insert/Edit Link
  • In the pop-up window. find the ANCHORS drop down in the lower portion of the screen
  • Select the anchor your wish to link to
  • Click Insert
  • Click Save or Apply to save changes
  • Your text is now hyperlinked to the anchor. Test it on the front end.
TIP: The classic example of a page that relies on anchor links to guide an end user is an FAQ page. Questions are often shown in a bulleted list at the top of the page and linked to anchors further down the page whether the answer text is location.

To add the link to the new anchor you created from another article or a module:

  • Open that article or module in edit mode
  • Select the text you wish to link from
  • Click Insert/Edit Link
  • In the pop-up window. find the MENU drop down in the lower portion of the screen
  • Select the menu item you wish to link to
  • Click Insert
  • In the URL field at the top of the form, at the end of the URL that has been inserted, add a # and the anchor name you created. The end result will look like something like this:

    index.php?option=com_content&view=article&id=4&Itemid=6#my-anchor-name
  • Click Save or Apply to save changes
  • Your text is now hyperlinked to the anchor. Test it on the front end.
TIP: Instead of selecting the menu item from the MENUS section of the popup, you can also type in the relative URL for the page you wish to link to and add the anchor tag to it, like this:

/about/staff/#my-anchor-name
Have more questions? Submit a request
Article is closed for comments.