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.

Examples

Basic

Documentation

Usage

Class
Applied to
Outcome
.pf-c-back-to-top
<div>
Initiates the back to top component. Required
.pf-m-hidden
.pf-c-back-to-top
Modifies the component to be hidden.

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