Skip to content
Patternfly Logo

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
NameTypeDefaultDescription
classNamestringAdditional classes added to the back to top.
innerRefReact.Ref<any>Forwarded ref
isAlwaysVisiblebooleanFlag to always show back to top button, defaults to false.
scrollableSelectorstringSelector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events.
titlestringTitle 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--pf-c-back-to-top--Bottom
1.5rem
.pf-c-back-to-top--pf-c-back-to-top--md--Bottom
3rem
.pf-c-back-to-top--pf-c-back-to-top--c-button--FontSize
0.75rem
.pf-c-back-to-top--pf-c-back-to-top--c-button--BorderRadius
30em
.pf-c-back-to-top--pf-c-back-to-top--c-button--PaddingTop
0.25rem
.pf-c-back-to-top--pf-c-back-to-top--c-button--PaddingRight
0.5rem
.pf-c-back-to-top--pf-c-back-to-top--c-button--PaddingBottom
0.25rem
.pf-c-back-to-top--pf-c-back-to-top--c-button--PaddingLeft
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 .pf-c-button--pf-c-button--FontSize
0.75rem
.pf-c-back-to-top .pf-c-button--pf-c-button--BorderRadius
30em
.pf-c-back-to-top .pf-c-button--pf-c-button--PaddingTop
0.25rem
.pf-c-back-to-top .pf-c-button--pf-c-button--PaddingRight
0.5rem
.pf-c-back-to-top .pf-c-button--pf-c-button--PaddingBottom
0.25rem
.pf-c-back-to-top .pf-c-button--pf-c-button--PaddingLeft
0.5rem

View source on GitHub