Skip to main content
Official website. How you know

Official websites use .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS

A lock or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Digital Design System

Back to top

Back to top is a button that helps users navigate back to the top of long pages. It’s usually paired with jump links.

Overview

The back to top button only appears on pages that are four times taller than the viewport height. It has different behavior on desktop and mobile devices.

Desktop

On desktop, the back to top button appears as a sticky icon button when the user scrolls below the fold (1x viewport height). The back to top text is revealed on hover.

Default

Blue upward-pointing arrow in a white circle with a blue outline

Hover

Blue upward-pointing arrow with text Back to top, where Back is above the words to top, in a white oval with a blue outline

Focus

A dashed line around the Back to top hover state

Mobile

On mobile, the back to top button is not sticky. It's positioned below the page content and above the footer. The back to top text is always visible.

Default

Blue upward-pointing arrow and the text Back to top, on a single line, in a white oval with a blue outline

Focus

A dashed line around the Back to top mobile default state

Usage context

When to use

Use back to top whenever you use jump links.

You may also use back to top on any long page.

When to use something else

Don’t use back to top on short pages.

Usage guidelines

On mobile, place the back to top button at the bottom of the page (below the content and above the footer). It is not sticky or floating.

NYC mobile Department of Finance page content Back to top button and department footer

Incorrect placement of the back to top component between page content and a link

Back to top

The Back to top button can be invoked via the nyc-back-to-top custom element. This custom element will automatically calculate when to render the button based on page length and scroll position.

This code is for reference only. The library is currently in beta. Check back for future releases.
<nyc-back-to-top>
  <button id="back-to-top" class="button" data-variant="back-to-top" aria-label="Back to top">
    <span>Back to top</span>
  </button>
</nyc-back-to-top>