An anchor link is a link, which allows the users flow through a page. It helps to scroll and skim-read easily. A named anchor can be used to link to a different part of the same page (like quickly navigating) or to a specific section of another page.

In Social Pinpoint, you can achieve setting up an anchor point using a combination of our tools. This will require a tiny piece of coding but the following will help guide you step-by-step and include examples.

To create an anchor point, you can set this up with a combination of 2 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.

⚠️NOTE: Anchor links hidden behind a 'Tab' wouldn't work, an alternative would be to 'activate' the tabs.

Check out these two examples of Anchor point links below:

Text Link to Anchor Point

This is a text link that will take me to the anchor point poll at the bottom of the page

Setting up the Anchor Point

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.

So our example will look like the 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

   Please note: The URL is case sensitive so ensure that the ID is identical to what was in your HTML block, otherwise the link will not work. Ensure also there are no spaces in your ID.

4. Ensure in the section: Open link, you keep the ‘Open link in the same window’ selected

Once you’ve completed the feature, select ‘Insert’ now you can test out your anchor point!

Using a Feature Grid to link to the Anchor Point

1. Set up your feature grid as normal and customise your Feature to suit your preferences.
2. In the section URL, you will need to insert the id you used in your HTML block with a hashtag in front. e.g.
   
   

   #Dropapin

   Please note: The URL is case sensitive so ensure that the ID is identical to what was in your HTML block, otherwise the link will not work. Ensure also there are no spaces in your ID.
   

4. Once you’ve completed the feature, select ‘Save’, then ‘Save’ the rest of the Feature Grid and 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. Here we have a quick video tutorial from Ipswich City that helped built this article!

How It Works

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 prioritisation (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.

Limitations

• Tab-specific anchor links will not work on draft pages (remove “/%21drafts” in the URL for testing).
• This function only opens the tab; it does not scroll to a specific section within the tab.