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.

Below example does not demonstrate functionality see React demos for a full demonstration.

Examples

Basic

Props

BackToTop

*required
Name	Type	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-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

View source on GitHub