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
Create the anchor at the location you want to link to by copying the following HTML code, pasting it into the location you want to link to and replacing the anchor name shown in bold with a unique name for your anchor: <a name="anchor"></a> The anchor should be placed at the beginning of the line where you want to start reading after you jump.-
The anchor link can be placed in the block title of a text block before the usual block title. Here’s an example of what this can look like in both editor and the live site.
See how on the live site the anchor is not visible.
-
An anchor can be inserted in a HTML block which is placed directly above the location you want to link to. This technique is useful if you want to create some clear space above the anchor location.
-
An anchor can also be inserted into a text block using source mode. This technique is useful if you want to link to a specific location with a paragraph.
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 link, button or picture. Just make a link as you normally would for text, button and image links (see guide for creating links) and enter the follow the 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. 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 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. /page/yourpagename/#anchor. See the example below for a button block link where the page name is 'awesome'.
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 here.