Anchor links

Create anchor

Heading anchor link - Headings in Expert 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

To point to an anchor link from within Expert, 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

Limitations

• When authenticated Pro Members click a hyperlink to an anchor, the page scrolls to the anchor point, which may be hidden by the Draft Toolbar. Non Pro Members cannot see the Draft Toolbar so the anchor location will appear at the top of the page as expected.
• When Anonymous users or Community Members click a hyperlink to an anchor, the heading title may be blocked by the Breadcrumb bar depending on the length of the page and browser functionality. If you have any more questions, please contact the Expert Support Team.
• Hyperlinks to Heading anchors reference the heading text. If you modify the heading text, you must edit the hyperlink to the anchor to match the new heading text.

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 Expert 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 Expert text color:

   .anchor-link {
       color: #333;
   }

    

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

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