Back to top

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

Back to top only shows after overflowing element has been scrolled 400px.

Examples

Basic

Props

BackToTop

*required
Name	Type	Description
className	string	Additional classes added to the back to top.
innerRef	React.Ref<any>	Forwarded ref
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


	.pf-c-back-to-top	--pf-c-back-to-top--Right	3rem
--pf-c-back-to-top--Right --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-back-to-top	--pf-c-back-to-top--Bottom	1.5rem
--pf-c-back-to-top--Bottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-back-to-top	--pf-c-back-to-top--md--Bottom	3rem
--pf-c-back-to-top--md--Bottom --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-back-to-top	--pf-c-back-to-top--c-button--FontSize	0.75rem
--pf-c-back-to-top--c-button--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-back-to-top	--pf-c-back-to-top--c-button--BorderRadius	30em
--pf-c-back-to-top--c-button--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-back-to-top	--pf-c-back-to-top--c-button--PaddingTop	0.25rem
--pf-c-back-to-top--c-button--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-back-to-top	--pf-c-back-to-top--c-button--PaddingRight	0.5rem
--pf-c-back-to-top--c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-back-to-top	--pf-c-back-to-top--c-button--PaddingBottom	0.25rem
--pf-c-back-to-top--c-button--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-back-to-top	--pf-c-back-to-top--c-button--PaddingLeft	0.5rem
--pf-c-back-to-top--c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-back-to-top	--pf-c-back-to-top--c-button--BoxShadow	0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
--pf-c-back-to-top--c-button--BoxShadow --pf-global--BoxShadow--lg-bottom $pf-global--BoxShadow--lg-bottom 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-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-c-back-to-top .pf-c-button	--pf-c-button--FontSize	0.75rem
--pf-c-button--FontSize --pf-c-back-to-top--c-button--FontSize --pf-global--FontSize--xs $pf-global--FontSize--xs pf-font-prem(12px) 0.75rem
	.pf-c-back-to-top .pf-c-button	--pf-c-button--BorderRadius	30em
--pf-c-button--BorderRadius --pf-c-back-to-top--c-button--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-back-to-top .pf-c-button	--pf-c-button--PaddingTop	0.25rem
--pf-c-button--PaddingTop --pf-c-back-to-top--c-button--PaddingTop --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-back-to-top .pf-c-button	--pf-c-button--PaddingRight	0.5rem
--pf-c-button--PaddingRight --pf-c-back-to-top--c-button--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-back-to-top .pf-c-button	--pf-c-button--PaddingBottom	0.25rem
--pf-c-button--PaddingBottom --pf-c-back-to-top--c-button--PaddingBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-back-to-top .pf-c-button	--pf-c-button--PaddingLeft	0.5rem
--pf-c-button--PaddingLeft --pf-c-back-to-top--c-button--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines