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 column	Selector	Variable	Value
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-back-to-top)	--pf-v6-c-back-to-top--c-button--BoxShadow	0px 1px 4px 0px rgba(0, 0, 0, 0.1600)
--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 --pf-t--global--box-shadow--color--sm --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(0, 0, 0, 0.1600)
	.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

View source on GitHub