Skip to main content
MindTouch Success Center

Anchor links

Use anchor links to hyperlink to a specific part of an article. After you create the anchor link destination, you can point to the anchor link anywhere you use hyperlinks (within your MindTouch site or an external location).

Create anchor link

Heading anchor link - Headings in MindTouch automatically function as anchors links. To create a heading anchor link, use the editor Heading drop-down menu to apply a heading style (H1, H2, H3, H4, or H5) to any text and save the page.

Regular text anchor link - While in edit mode, place your cursor or select text in your desired anchor link destination and select Elements > Anchor from the editor toolbar. Enter a name for the anchor link and click OK

Hyperlink to anchor link

To point to an anchor link from within MindTouch, follow the steps to add a hyperlink and select an option from the Jump to anchor or section in the Link dialog.

To get the URL to point to an anchor link from an external location, append the header name (replace spaces with underscores) or anchor link name (replace spaces with plus signs) to the page URL. Anchor link URLs are case-sensitive.

  • Page URL: https://success.mindtouch.com/Support/Authoring/Smart_Content_Editor/Anchor_links
  • Heading anchor URL: https://success.mindtouch.com/Support/Authoring/Smart_Content_Editor/Anchor_links#Create_anchor_link
  • Regular text anchor URL: https://success.mindtouch.com/Support/Authoring/Smart_Content_Editor/Anchor_links#Example+Name

Change anchor text style

When you assign an anchor link to text, by default it will appear with the same styling as hyperlinked text. Use CSS to modify the style to appear as regular text.

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. 

  1. In edit mode, click </>HTML in the editor toolbar to see source view and manually add a class name to your anchor link.

    Default example:<a id="Example+Name" name="Example+Name">Anchor Text</a>
    Class added:<a class="anchor-link" id="Example+Name" name="Example+Name">Anchor Text</a>

  2. Define the custom anchor link style via global CSS in the Control panel or include a style in-line with the anchor tag.

    Example global CSS that changes anchor text color to match default MindTouch text color:
    .anchor-link {
        color: #333;
    }
     

    Example in-line style that changes anchor text color to match default MindTouch text color:

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

 

  • Was this article helpful?