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.

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-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