Skip to content
PatternFly logo

Back to top

The back to top component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.

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