Back To Top

The <nys-backtotop> component provides a button that allows users to quickly return to the top of a page, enhancing user experience and accessibility. The back to top button will appear on a screen after you scroll 1.5 screen lengths.

This Back to Top button is always visible for demo purposes. In a real-world scenario, it typically remains hidden until you scroll down the page and appears in the bottom-right corner, unless specified.

Copy Code
<nys-backtotop id="backtotop-demo"></nys-backtotop>

Can't use NYS design System web components in your project? Try using the CSS Variables instead.


Options

Position Left

By default, <nys-backtotop> will be set on the bottom-right corner. If the bottom-right corner is blocked (e.g. by a chatbot button), set the position prop to "left" to position this component in the bottom-left instead.

Sample Content on page

This is a sample content area used to demonstrate the functionality of the Back to Top button. In an actual application, nys-backtotop would not be visible until the user scrolls down the page.

Copy Code
<nys-backtotop position="left"></nys-backtotop>

Usage

When to use this component

  • Only use 1 back to top component on a page.
  • Use the component when the content is designed to be longer than the height of the screen.

When to consider something else

  • Use when the content is designed to fill the size of the screen and is not scrollable.

Do

  • Only use 1 back to top component on a page.
  • Use the component when the content is designed to be longer than the height of the screen.
  • Place the <nys-backtotop> component above the <nys-globalfooter> in your code.

Don't

  • Don't add multiple <nys-backtotop> components to one page.
  • Don't use <nys-backtotop> when the content fits within the screen and doesn’t scroll.

Accessibility

The <nys-backtotop> component includes the following accessibility-focused features:

  • Last focusable element on page load for easy keyboard navigation
  • Keyboard navigable with Tab key
  • Pressing Enter or Space activates the <nys-backtotop> functionality
  • Visible only when the user scrolls down the page, ensuring it does not distract from the content

Properties

Property Type
id String
position String

CSS Variables

There are no existing CSS variables for this component. Explore existing options, or propose a new one with a Component Proposal.


Events

Suggest a New Component

Do you have an idea for a new NYS Design System web component? Look through the existing proposals in our GitHub discussions board to see if someone already proposed something similar. If not, feel free to submit one.

Edit this page on GitHub (Permissions required)

Last updated: November 25, 2025