Skip to main content
MindTouch Success Center

Add anchors to your text

This page applies to:MindTouch (current)

Adding an anchor to your text allows you to link to that specific part of your article. You may link any text, whether it lives on that page or on other pages on your site to that anchor, just like with any other link. When clicked, the link allows a reader to jump to that anchor in the article. 
 

Establish heading anchors


In MindTouch, headings automatically create anchors called Sections. To add a heading anchor, edit a page and select where you want the header. Then select H1, H2, H3, or Hx from the editor menu to select the heading that you want. Click Save once the heading is added.

.  
 

Establish in-text anchors


You can create anchors in any article. Edit the article you would like to create the anchor for and select the word(s) you would like to add the anchor to. From there, select the Flag icon in the Editor to open the Anchor Properties dialog. Name your anchor and click OK.

AnchorLink.png
 

You can also add anchors to areas of your article without selecting any text. This will direct an anchor link to the line it is appended to.

AnchorNoText.png
 

Change the anchor color


An anchor's HTML markup is an <a> tag just like regular links on your page. Because of this, any text that is added to an anchor will have the same styling as a normal link. This may cause confusion to the end user as the anchors do not have a destination (href) attribute but the browser will make them look like normal links. You can add a class name with accompanying CSS style in the control panel, or an inline style to your anchor that will make it look like the rest of your default text. In this example, we will use the hex color code #333 (dark grey) as it is the default text color for MindTouch deployments. 

Step 1: Add a class name to your anchor

<a class="anchor-link" id="My Anchor's Name" name="My Anchor's Name">My Anchor's Name</a>

Step 2: Add a custom style in control panel

.anchor-link {
    color: #333;
}
Or you can attach the following inline style to the HTML of your anchor:
style="color: #333"

Step 3: A full anchor point would look like this

<a id="My Anchor's Name" name="My Anchor's Name" style="color: #333">My Anchor's Name</a>

 

Anchor examples


FixedAnchor.png
 

  • Was this article helpful?