How to Set up Anchor Links

Anchor links are a link that allows users to jump to specific spots on the same page or to a specific section of another page. They help readers scroll and skim-read easily.

In Social Pinpoint, you can set up anchor points using a combination of our tools. This will require a tiny piece of coding, but the following guide will walk you through each step. 

To create an anchor point, you can set this up with a combination of two tools. You will need the HTML block to create the anchor point, and either a Feature Grid or Text Block tool create the link. At this stage, the anchor links won’t work with the Tabs or Button tool.

In both instances, we are setting up a heading which will act as our anchor point on the page.

---

Example

Text Link to Anchor Point

This is a text link that will take me to the anchor point for 'how to set up anchor points links'.

Feature Grid Link to Anchor Point

---

Anchor Point Set Up

1. Drop a HTML block onto your page.
2. Move it into the position where you would like the anchor to link directly to.
3. If you would like the anchor to be on a content or participation tool, insert the HTML tool right above the desired tool.

In the text input, insert the copy as follows:

<a id="[Insertyourheadinghere]"><h2>[Insert your heading here]</h2></a>

id - [Insertyourheadinghere] - Ensure there are no spaces in your id. This is how your link will be identified.

Heading - [Insert your heading here] - This is the heading as it will appear on the page. You can insert spaces.

Heading style - <h2> – In this instance, we are using h2, but you could use h1, h2, h3, h4, or h5.

Our example will look like below:

<a id="Dropapin"><h2>Drop a Pin</h2></a>

When you save this, it will look like a normal heading, see below example:

---

Setting up the link to the Anchor Point

Currently there are two ways of doing this:

• Using the Text block
• Using the Feature Grid

Using a Text block to link to the Anchor Point

1. Set up your Text Block as normal. Type in the text you want to link to your anchor point. Style this to your preference.
2. To link the text, highlight the text and select the Link icon button, then select Insert Link.
3. In the URL, you will need to insert the id you used in your HTML block with a hashtag in front. e.g. #Dropapin
4. Ensure in the section: Open link, you keep the ‘Open link in the same window’ selected.
5. Once you’ve completed the feature, select ‘Insert’. Now you can test out your anchor point!

---

Anchor Links for Tabs

While anchor links do not scroll to a specific position when placed within tabs, they can be used to open a specific tab on a page. 

You can create a URL that opens a particular tab when the link is clicked. This feature works on published pages only.

1. Copy the Magic Tab Link - Navigate to the page and open the desired tab, right click the tab and select "Copy link Address" this will provide you the specific link to the tab
   
   
   
   Example URL: https://www.website.com.au/example-project-page#jl_magic_tabs_exampletab
2. Apply prioritization (optional) - Add #top before the query parameter so the page always loads from the top.
   
   Example URL:https://www.website.com.au/example-project-page#top#jl_magic_tabs_exampletab
3. Add the Link to Your Page - Use the Text Block or Feature Grid tool to add the hyperlink. Ensure the link opens in a new window or lightbox. It will not work if opened in the same window.
4. Publish and Test - Save and publish your page. Test the link to ensure it opens the correct tab.