Back to top

The back to top component is a shortcut that allows users to quickly navigate to the top of a page via a button.

Examples

Basic

Documentation

Usage

Class
Applied to
Outcome
.pf-v6-c-back-to-top
<div>
Initiates the back to top component. Required
.pf-m-hidden
.pf-v6-c-back-to-top
Modifies the component to be hidden.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-back-to-top--pf-v6-c-back-to-top--InsetInlineEnd
3rem
  • --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
1.5rem
  • --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
3rem
  • --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
0.75rem
  • --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
0.25rem
  • --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
0.5rem
  • --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
0.25rem
  • --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
0.5rem
  • --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
0.75rem
  • --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
0.25rem
  • --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
0.5rem
  • --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
0.25rem
  • --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
0.5rem
  • --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