Back to top

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

Examples

Basic

Documentation

Usage

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

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