---
title: Scroll to Top
date: 2023-12-17T12:36:00-08:00
author: Josh Magness
canonical_url: "https://designsystem.umd.edu/components/scroll-to-top"
section: Components
---
# Scroll to Top

The Scroll To Top button lets users quickly return to the top of a page to access the site navigation. This component is particularly useful on sites with long pages. 
Lets users quickly return to the top of a page 
## Dos
- Use on pages that are longer than 4 full screen heights
- Always place the fixed "Scroll to Top" button on the lower right side of the page
## Don'ts
- Don't use on short pages
## Variations

[View component playground: Scroll to Top](https://playground.designsystem.umd.edu/?path=/story/components-scroll-to-top--inline)

## Accessibility

### Built in accessibility

**Keyboard Accessible**
Users are able to use the keyboard to navigate through the scroll to top arrow using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate.WCAG 2.1.1: Keyboard This navigation is done in sequential and logical order. WCAG 2.4.3: Focus Order

**Hover and Focus State**
The scroll to top arrow has its own distinctive styling on hover/focus to provide a visual cue to the user that the element is focused and there is an action that can be taken. WCAG 1.4.13: Content on hover or focus

**Color Contrast**
A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability WCAG 1.4.3: Contrast (minimum)

**Responsive**
The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow

**Consistent**
Styles are applied to the component consistently including line height, font style, weight, spacing and color of text. WCAG 1.4.12: Text Spacing 

## Content

Recommended icon dimensions
| Desktop | 20px × 20px | 
| Mobile | 16px × 16px | 
## Layout

[View Figma design: Scroll Top](https://www.figma.com/file/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?type=design&node-id=7851%3A3910&mode=design&t=aeA4SlHQ6W7nWBNq-1)