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. Learn more about Beta components here.

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