Back To Top

The <nys-backtotop> component provides a floating button that allows users to quickly scroll back to the top of a page. It auto-appears after scrolling 1.5 viewport heights on pages that are at least 4 screens tall, and renders as a compact circle button on mobile devices.

Accessibility

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

• Renders as a <nys-button> with the label "Back to top," providing a clear accessible name for screen readers.

• Keyboard navigable with the Tab key. Pressing Enter or Space activates the smooth-scroll behavior.

• Hidden from the tab order and screen readers when not visible, so it does not interfere with keyboard navigation on short pages.

• On mobile, renders as a circle button with an up-chevron icon. The button retains its accessible label.

• Uses position: fixed positioning, so it remains accessible regardless of scroll position.

  Additional accessibility test and build content is coming soon, in a new format.

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.

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

Usage

When to use this component

• Use on long-form content pages such as state policy documents, agency service directories, and program eligibility guides.
• Use on pages with extensive search results or data tables, such as a professional license lookup or business registration listing.
• Use when users need a quick way to return to the top-level navigation after scrolling through detailed content, such as a benefits application FAQ.

When to consider something else

• Don't use on pages where content fits within a single viewport without scrolling.
• If your page uses anchor-based in-page navigation (e.g., a table of contents), users already have navigation tools and a back-to-top button may be redundant.

Properties

Style Overrides

Events

The <nys-backtotop> component emits three custom Javascript events:

1. click – Emitted when the backtotop is clicked.
2. focus - Emitted when the backtotop receives focus.
3. blur - Emitted when the backtotop loses focus.

Event details

You can listen to these events using JavaScript:

// Select the backtotop component
const backtotop = document.querySelector("nys-backtotop");
// Listen for the 'click' event
backtotop.addEventListener("click", () => {
	console.log("Backtotop clicked");
});
// Listen for the 'blur' event
backtotop.addEventListener("blur", () => {
	console.log("Backtotop lost focus");
});