How to make mark up links and anchors to other sections of the same page in the Client Portal

Overview

A common question which arises when clients are building out content in the TeamDynamix Client Portal is how to make links which navigate to other sections further down in the same page. This is an especially useful technique for building an article which has a table of contents at the beginning.

The good news is that this is entirely possible to accomplish but has a bit of complexity to ensure that, when the page content is scrolled, the destination content is not partially hidden by the Client Portal header bar. These techniques apply to Knowledge Base articles, Services and (less commonly) Questions.

Example HTML markup for in-page links

Here is a quick example of how you might put a link at the top of a Knowledge Base article to jump down to a Contact Us section in the middle of the article.

The clickable (starting point) link

The markup for the anchor which will be clicked at the top of the page will be as follows:

<a href="#ContactUs">Go to the Contact Us section</a>

The value of the starting point link's href attribute should be in the format #ID-of-DestinationLink. In this case, since the destination link below will have an id and name value of ContactUs, the starting point link should have an href value of #ContactUs.

The destination link

You would place markup like the following at the beginning of the Contact Us section in the article (where you want to end up after clicking the Contact Us link at the top of the page):

<a name="ContactUs" id="ContactUs" style="padding-top: 150px; margin-top: -150px; display: inline-block;"></a>

This destination link will not be visible to the user because it has no text between the <a> tags. Take special note of the padding-top and margin-top values highlighted here. The reason for these attributes are as follows:

  • The positive padding-top value offsets the destination section 150 pixels from the top of the page. This is to ensure that the content scrolled to will not be hidden beneath the Client Portal header bar.
  • The negative margin-top value removes the visible 150 pixel offset from the page content (added by the padding-top value). If you do not provide this value in addition to padding-top, you will see a large blank space above the destination link.
  • The inline-block display value is important for the fix to work in webkit-based browsers like Google Chrome.

Padding-top and margin-top values should both be provided and should be positive and negative equivalents of the same value to ensure that content never gets hidden under the header bar.

It should also be noted that the 150px value is simply an example value. You may need to experiment with these values (smaller or larger) to get the correct fit for your Client Portal as the header size is variable due to logo size and styling. We find that it is helpful to use the browser's developer tools to find the height of header bar. For reference, the Client Portal header bar is considered to be the following elements highlighted in red below:

100% helpful - 4 reviews

Details

Article ID: 17243
Created
Mon 10/10/16 9:46 AM
Modified
Fri 12/6/19 2:39 PM