Skip to main content
Version: v6.0.0

ontario-back-to-top

Use a Back to Top button to help users quickly navigate to the top of a long page.

Usage guidance​

Please refer to the Ontario Design System for current documentation guidance.

Configuration​

Once the component package has been installed (see Ontario Design System Component Library for installation instructions), the Back to Top component can be added directly into the project's code, and can be customized by updating the properties outlined here. Please see the examples below for how to configure the component.

Examples​

By default, the Back to Top button will have its language set to English ('en'). However, a property can be passed to set the language to French by default. For example:

<ontario-back-to-top language="fr"> </ontario-back-to-top>

Otherwise, a default Back to Top button can be used as follows:

<ontario-back-to-top> </ontario-back-to-top>

Technical Note: SSR (Server-Side Rendering) Considerations​

The Ontario Back to Top component is SSR-compatible and renders static markup during server-side rendering. For full functionality, client-side hydration is required. To ensure consistency:

  • Scroll behavior and visibility toggling rely on window and scroll position, which are only available in the browser. These features activate after hydration.
  • Language Prop: Language change events only fire in the browser after hydration. To ensure the correct language is rendered during SSR, it's recommended to pass the desired language explicitly as a prop (e.g., <ontario-back-to-top language="fr"></ontario-back-to-top>).

Properties​

PropertyAttributeDescriptionTypeDefault
languagelanguageThe language of the component. This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English."en" | "fr" | undefinedundefined

Built with StencilJS