Skip to main content
v1.0.5
Components / Back to top
Edit this page
Report an issue

Back to top

You can use this component to scroll to the top of a document (or another scrollable element).

By default the button will be fixed to the bottom right hand corner of the page. See below for an example of how to override the positioning.

To apply the BackToTop component to a specific element, use the scrollableId prop. To use the BackToTop component to scroll the entire page, do not set the scrollableId prop.

Scrollable container example

By setting position: relative on a parent element, and position: absolute on the BackToTop, we can position the button within the parent.

ReferenceError: React is not defined

By default, the button will appear when the container's scrollTop is greater than 400 pixels. To make it always visible, set the alwaysVisible prop.

Always visible example
ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
alwaysVisiblenoBooleanfalseIf alwaysVisible is not set, the component will only appear after the window has been scrolled.
scrollableIdnoStringIf scrollableId is set, the component will update this element's scrollTop property. Otherwise, document.body will be scrolled.

Imports

Import React components (including CSS):

import {BackToTop} from 'pivotal-ui/react/back-to-top';

Import CSS only:

import 'pivotal-ui/css/back-to-top';