Sometimes you may have different sections on your page that you want an easy way to jump to different sections than relay on views scrolling down to find this information. This can be done using anchors. Anchor links allow you to place links on your website which when clicked allow the viewer to jump to another location on the page.
There are two parts to an anchor link. The anchor is the place where you want to be linked to. The link is what gets you to the anchor.
There are two parts to an anchor link. The anchor is the place where you want to be linked to. The link is what gets you to the anchor.
Part 1. Create the anchor at the location you want to link to
Start by inserting either a Text Block, and flicking to source mode (clicking on <> in the text block area) or add a Code block above/at the location you want to link to.
In the Source Code or Code Block enter the following:
<a name="NameOfAnchor"></a>
Note: Make sure you replace the text "NameOfAnchor" with your own title of the anchor. e.g anchor1
Each separate anchor you set up will need to be named something different in order to link to the appropriate section. e.g anchor2
- See the example below of an anchor inserted in the code block
- See the example below of an anchor inserted in the text block
Part 2. Create the anchor link.
Now you need to create the anchor link that people click on to arrive at your anchor created in part 1 above. Your link can be a text, button, picture or grid gallery link. Just make a link as you normally would for text, button and image links and continue with the following instructions below.
If you are linking to a location on the same page, the format of the link will be simply #anchor but replace the text in bold with the name of the anchor you created in part 1 e.g anchor1. If adding the link to a picture or button block the anchor link needs to be added in the Website links tab, click Save to continue.
Note: When the #anchor tag is added as a link and save is clicked, a red error-looking box is displayed, click save again and the #anchor will be saved.
- Anchor link example for a text link:
- Anchor link example for a button block for an anchor placed on the same page:
- If you want a link to jump a specific location on a different page, you'll need to also add in the URL (web address) of the page where the anchor is located but don't include your domain name or Rocketspark trial address in the URL. Start from the first forward slash of the URL e.g. /yourpagename/#anchor1 or page/ /yourpagename/#anchor1 (depending on how your page URL displays)
See the example below for a button block link where the page name is 'about'
Important note: When your test the anchor link in editor mode the anchor location may be hidden behind the Dashboard control bar at the top of your website. Set your website online in your dashboard home page and then log out of your dashboard to see how the anchor works on your live site.
One page menu with anchor links
If you are wanting to create a single-page website and are wanting to have a menu at the top of the page that links to Anchors throughout the page please contact the Customer Success team to get a quote for this work.