---
# System prepended metadata

title: Back to Top Button
tags: [Navigation]

---

---
title: Back to Top Button
tags: Navigation
---

# Navigation: Back to Top Button
###### **Control Code:** `N.BTB`
<!--
![](https://via.placeholder.com/1600x900/D3D3D3/000000/?text=Splash%20Placeholder%20Image)
-->
## About This Component

The design system has a clear control to allow the user to return to the top of the page in a single click rather than manually scroll up.
<!--
### Usage Guidelines

:::info
*TODO: Novartis to write.*
:::

General guidelines for using this component. Include any information the user will need to know but that may not fit into the below annotated breakdown of the individual requirements for the component.

### Related Components

:::info
*TODO: Novartis to write.*
:::

A list of other components that are related. Consider what other components may be useful based on the structure or format of information and if there are any specific limitations that can be overcome by using a different component.

- **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one.
- **[Component Name](/url-of-component):** Why it is related, or why we would recommend it instead of this one.

### Accessibility

:::info
*TODO: Novartis to write.*
:::

Specific accessibility considerations and recommendations for this component.
-->
## Primary Configurations

| **Extra Large Breakpoint (Desktop)** | **Medium Breakpoint (Tablet)** | **Extra Small Breakpoint (Mobile)** |
| -------- | -------- | -------- |
| ![](https://hackmd.io/_uploads/HkJ99D2V9.png) | ![](https://hackmd.io/_uploads/H1Sq9DnE5.png) | ![](https://hackmd.io/_uploads/r1Y55wnN5.png) |

| **Key** |
| ------- |
| ![](https://hackmd.io/_uploads/S1-x39hQc.png) |

### 1. Background Color

- **Required:** Must be included
- **Color:** GRADIENT_PRIMARY_01 (Primary Gradient), changeable within site color palette

### 2. Text Color

- **Required:** Must be included
- **Color:** NEUTRAL_0 (Solid White), changeable within site color palette

## Additional Configurations

### Back to Top Button Enabled

By default this Back to Top Button component is enabled for every page on the site, but it can be disabled so it is not shown on the site. This component only needs to be configured once per site.

- **Back to Top Button Enabled:** Default the Back to Top Button is enabled, can be disabled for the whole site

## Resources

### CMS Instructions

#### Back to Top Administration

Site administrators can enable and disable the **Back to Top** button as follows:

**Step 1** : Navigate to the **Structure** menu and click **Config pages**:

![Configuration Menu Item](https://hackmd.io/_uploads/Skfy6S3Qq.png)

On the Config Pages screen, click the **Edit** button under Operations for **Back to Top**:

![Configuration Library](https://hackmd.io/_uploads/SJOz6peP9.png)

**Step 2:** Review the available settings within the Back to Top configuration page: 
 
![Back to Top Configuration page](https://hackmd.io/_uploads/H1f2ZCeDc.png)

Checkmark ensures that **Show Back to Top button** is enabled.

**Step 3:** Make changes:

- Choose **Background color** from the drop-down.
- Choose **Text color** from drop down.

**Step 4:** Be sure to click the **Save** button to ensure that your changes are updated.

![Save Button](https://hackmd.io/_uploads/SJI5dH279.png)

**Step 5:** View the updates

![Updated Back to Top](https://hackmd.io/_uploads/ryRTAyiQc.png)


