If you have ever wanted to direct your users to a certain part of your page, anchors are a great way of doing this.

The HTML element is a great way to add custom anchors into your page. A good example is included below, which can be added into your page anywhere you would like an anchor. Be sure to change my-heading to a unique ID!

<div id="my-heading"></div>

Once you have your anchors set up within the HTML element, it's time to link to this. There are a couple of ways that you can do this!

  • Open the page using the URL with the anchor attached
    Example: https://www.example.com/pages/example#my-heading
  • Add a Button element to your page for users to click on. For same-page anchors, you can simply insert "#my-heading" into the URL field of the button. For linking to an anchor on a different page, you will need to use the full URL.
  • Add a hyperlink to your Text element
#my-heading

Why are my anchors not working?

There are a couple of reasons why your anchors may not be working correctly on your page.

  • Your anchors are not unique - each anchor must have a unique ID
  • Your anchors will not work in our editor, or on page previews - these will work on the live page
  • Your anchors will not link to content inside of tabs that are not currently active
  • Your anchors may drop the user to a higher point in the page if the page contains a large amount of images - since lazy loading only loads images when they come into view, this means that the page height is not fully calculated until all images are loaded
  • In rare occasions, this may be a theme conflict - in which case, please get in touch with our support team who can investigate: support@getshogun.com
Did this answer your question?