Below example does not demonstrate functionality see React demos for a full demonstration.
Back to top only shows after overflowing element has been scrolled 400px.
Examples
Props
BackToTop
| Name | Type | Default | Description |
|---|---|---|---|
| className | string | Additional classes added to the back to top. | |
| isAlwaysVisible | boolean | Flag to always show back to top button, defaults to false. | |
| scrollableSelector | string | Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events. | |
| title | string | Title to appear in back to top button. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--Right | 3rem | ||
--pf-v5-c-back-to-top--Right --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--Bottom | 1.5rem | ||
--pf-v5-c-back-to-top--Bottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--md--Bottom | 3rem | ||
--pf-v5-c-back-to-top--md--Bottom --pf-v5-global--spacer--2xl $pf-v5-global--spacer--2xl pf-size-prem(48px) 3rem | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--c-button--FontSize | 0.75rem | ||
--pf-v5-c-back-to-top--c-button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--c-button--BorderRadius | 30em | ||
--pf-v5-c-back-to-top--c-button--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--c-button--PaddingTop | 0.25rem | ||
--pf-v5-c-back-to-top--c-button--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--c-button--PaddingRight | 0.5rem | ||
--pf-v5-c-back-to-top--c-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--c-button--PaddingBottom | 0.25rem | ||
--pf-v5-c-back-to-top--c-button--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--c-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-back-to-top--c-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-back-to-top | --pf-v5-c-back-to-top--c-button--BoxShadow | 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | ||
--pf-v5-c-back-to-top--c-button--BoxShadow --pf-v5-global--BoxShadow--lg-bottom $pf-v5-global--BoxShadow--lg-bottom 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-v5-color-black-1000, .18) 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba(#030303, .18) 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18) | ||||
| .pf-v5-c-back-to-top .pf-v5-c-button | --pf-v5-c-button--FontSize | 0.75rem | ||
--pf-v5-c-button--FontSize --pf-v5-c-back-to-top--c-button--FontSize --pf-v5-global--FontSize--xs $pf-v5-global--FontSize--xs pf-font-prem(12px) 0.75rem | ||||
| .pf-v5-c-back-to-top .pf-v5-c-button | --pf-v5-c-button--BorderRadius | 30em | ||
--pf-v5-c-button--BorderRadius --pf-v5-c-back-to-top--c-button--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-back-to-top .pf-v5-c-button | --pf-v5-c-button--PaddingTop | 0.25rem | ||
--pf-v5-c-button--PaddingTop --pf-v5-c-back-to-top--c-button--PaddingTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-back-to-top .pf-v5-c-button | --pf-v5-c-button--PaddingRight | 0.5rem | ||
--pf-v5-c-button--PaddingRight --pf-v5-c-back-to-top--c-button--PaddingRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-back-to-top .pf-v5-c-button | --pf-v5-c-button--PaddingBottom | 0.25rem | ||
--pf-v5-c-button--PaddingBottom --pf-v5-c-back-to-top--c-button--PaddingBottom --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem | ||||
| .pf-v5-c-back-to-top .pf-v5-c-button | --pf-v5-c-button--PaddingLeft | 0.5rem | ||
--pf-v5-c-button--PaddingLeft --pf-v5-c-back-to-top--c-button--PaddingLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
View source on GitHub
