Back-to-top enhancement

The Back-to-top enhancement provides digital workplace users with a shortcut to quickly and smoothly return to the top of the current page. This enhancement makes it easier for users to access the primary navigation, search, and other contextual information typically found at the top of a page. 

Back to top enhancement in use on a page.

If your digital workplace already has this enhancement, you can find configuration steps on your Styles page.

Sections in this article:

Considerations

  • Control Panel pages: The button does not appear on pages related to the control panel (e.g., Points and Status, Global Settings, etc.).

Set up the enhancement

To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.

Add enhancement CSS code to your theme

Add the following CSS code to your digital workplace theme. See Adding CSS to your digital workplace.

#tttbutton {
    display: inline-block;
    background-color: #011E41; /* Colour of the background square */
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 10%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .9s, opacity .9s, visibility .9s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#tttbutton::after {
    content: "\f062";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2.25em;
    line-height: 50px;
    transition: all 0.9s ease;
    color: #fff; /* colour of the arrow */
}
#tttbutton:hover {
    cursor: pointer;
    background-color: #416ba9; /* colour of the square on hover */
}
#tttbutton:active {
    background-color: rgb(5, 207, 99);
}
#tttbutton.show {
    opacity: 1;
    visibility: visible;
}

Add enhancement code to the header

Warning 

Adding code that contains errors can disrupt the functionality of your digital workplace. Use caution when adding code to this area.

Add the following code to the header of your digital workplace:

<!-- Back-to-top enhancement begins -->
<script src = "https://igdevdeveloperrelations.blob.core.windows.net/enhancements/src/igdr-tttbtn/igdr-tttbtn.js"></script> 
<script>
TTTButton(400); 
</script>
<!-- Back-to-top enhancement enhancement ends-->

Configure the enhancement

Once the code above has been added, the following code will be in the header of your digital workplace:

var forceModalGroupId = `USER_GROUP_ID`;
var buttonText = `BUTTON TEXT`;
var duration = DURATION;
var strict = TRUE/FALSE;
var title = `POP-UP TITLE`;
var text = `POP-UP TEXT`;

Modify the following parameters of the code block to customize some aspects of the enhancement's functionality and appearance.

Parameter Description
forceModalGroupId

The object ID of the group that should see the pop-up when they log in. For details on finding a group ID see this Help Center article: Finding group GUIDs

This parameter is required. 
 buttonText

The text that appears on the confirmation button of the pop-up.

This parameter is required.
duration

The number of days before a user should see the pop-up again after they accept it. For example, for the pop-up to appear every 24 hours, this value should be 1. For once a month, this value should be 30.

This parameter is required.
strict

Set to either true or false.

True: The pop-up will have an Accept and a Cancel button. Use to prompt users with a mandatory acknowledgment. Users can only dismiss this pop-up by selecting the Accept button. They cannot interact with the rest of the page until they acknowledge the provided information.

False: The pop-up will only have an Accept button. Use to draw attention to important information or recent changes. Users can dismiss this pop-up by selecting anywhere else on the page or by selecting the provided button.

The parameter's default value is false. 
title

Enter the text to appear as the title of the pop-up window.

This parameter is required.
text

Enter the text to appear in the body of the pop-up. This can contain HTML for text formatting purposes.

This parameter is required.
Parameters

When the parameters have been updated, you are ready to turn the enhancement on.

This enhancement has the following configuration options:

  • Threshold: Set how far users must scroll down a page before the button appears.
  • Custom CSS: Set the styling of the button. 

Turn the enhancement on

Once the code has been placed, the enhancement is ready to be used.  If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and  --> after the middle two lines and save the changes to the header. 

Turn the enhancement off

To turn the enhancement off, you can remove the code entirely or add // before the fourth line, as shown below, and save the changes to the header. 

<!-- Back-to-top enhancement begins -->
<script src = "https://igdevdeveloperrelations.blob.core.windows.net/enhancements/src/igdr-tttbtn/igdr-tttbtn.js"></script> 
<script>
TTTButton(400); 
</script>
<!-- Back-to-top enhancement enhancement ends-->

Changes to:

<!-- Back-to-top enhancement begins -->
<script src = "https://igdevdeveloperrelations.blob.core.windows.net/enhancements/src/igdr-tttbtn/igdr-tttbtn.js"></script> 
<script>
//TTTButton(400); 
</script>
<!-- Back-to-top enhancement enhancement ends-->

Use the enhancement

Return to top of page

Members can select the Back to Top button to return to the top of the page.