Skip to content
Patternfly Logo

Back to top

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.

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