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.
*required
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. |
Expand or collapse column | Selector | Variable | Value |
---|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--InsetInlineEnd | |
- --pf-v6-c-back-to-top--InsetInlineEnd
- --pf-t--global--spacer--2xl
- --pf-t--global--spacer--600
- 3rem
|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--InsetBlockEnd | |
- --pf-v6-c-back-to-top--InsetBlockEnd
- --pf-t--global--spacer--lg
- --pf-t--global--spacer--400
- 1.5rem
|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--md--InsetBlockEnd | |
- --pf-v6-c-back-to-top--md--InsetBlockEnd
- --pf-t--global--spacer--2xl
- --pf-t--global--spacer--600
- 3rem
|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--c-button--FontSize | |
- --pf-v6-c-back-to-top--c-button--FontSize
- --pf-t--global--font--size--body--sm
- --pf-t--global--font--size--xs
- --pf-t--global--font--size--100
- 0.75rem
|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--c-button--PaddingBlockStart | |
- --pf-v6-c-back-to-top--c-button--PaddingBlockStart
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--c-button--PaddingInlineEnd | |
- --pf-v6-c-back-to-top--c-button--PaddingInlineEnd
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--c-button--PaddingBlockEnd | |
- --pf-v6-c-back-to-top--c-button--PaddingBlockEnd
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--c-button--PaddingInlineStart | |
- --pf-v6-c-back-to-top--c-button--PaddingInlineStart
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-back-to-top | --pf-v6-c-back-to-top--c-button--BoxShadow | 0px
1px
4px
0px
rgba(41, 41, 41, 0.1500) |
- --pf-v6-c-back-to-top--c-button--BoxShadow
- --pf-t--global--box-shadow--sm
- --pf-t--global--box-shadow--X--sm--default
--pf-t--global--box-shadow--Y--sm--default
--pf-t--global--box-shadow--blur--sm
--pf-t--global--box-shadow--spread--sm--default
--pf-t--global--box-shadow--color--sm--default
- --pf-t--global--box-shadow--X--400
--pf-t--global--box-shadow--Y--500
--pf-t--global--box-shadow--blur--100
--pf-t--global--box-shadow--spread--100
--pf-t--global--box-shadow--color--100
- 0px
1px
4px
0px
rgba(41, 41, 41, 0.1500)
|
| .pf-v6-c-back-to-top .pf-v6-c-button | --pf-v6-c-button--FontSize | |
- --pf-v6-c-button--FontSize
- --pf-v6-c-back-to-top--c-button--FontSize
- --pf-t--global--font--size--body--sm
- --pf-t--global--font--size--xs
- --pf-t--global--font--size--100
- 0.75rem
|
| .pf-v6-c-back-to-top .pf-v6-c-button | --pf-v6-c-button--PaddingBlockStart | |
- --pf-v6-c-button--PaddingBlockStart
- --pf-v6-c-back-to-top--c-button--PaddingBlockStart
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-back-to-top .pf-v6-c-button | --pf-v6-c-button--PaddingInlineEnd | |
- --pf-v6-c-button--PaddingInlineEnd
- --pf-v6-c-back-to-top--c-button--PaddingInlineEnd
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|
| .pf-v6-c-back-to-top .pf-v6-c-button | --pf-v6-c-button--PaddingBlockEnd | |
- --pf-v6-c-button--PaddingBlockEnd
- --pf-v6-c-back-to-top--c-button--PaddingBlockEnd
- --pf-t--global--spacer--xs
- --pf-t--global--spacer--100
- 0.25rem
|
| .pf-v6-c-back-to-top .pf-v6-c-button | --pf-v6-c-button--PaddingInlineStart | |
- --pf-v6-c-button--PaddingInlineStart
- --pf-v6-c-back-to-top--c-button--PaddingInlineStart
- --pf-t--global--spacer--sm
- --pf-t--global--spacer--200
- 0.5rem
|