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-headingAdd 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