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.
Overview
Back to top button is designed to only be used once per page.
Installation
npm install @patternfly/elementsUsage
Default
View HTML Source
<pf-back-to-top href="#main">Back to top</pf-back-to-top>Label attribute
View HTML Source
<pf-back-to-top href="#main" label="Return to top"></pf-back-to-top>No text or label attribute
[aria-label] attribute defaults to text 'Back to top'
View HTML Source
<pf-back-to-top href="#main"></pf-back-to-top>
Scrollable Selector
See scrollable-selector in Attributes section below for more information.
View HTML Source
<div id="scrollable-selector-example">
<div class="overflow" tabindex="0">
<div class="scroll-indicator">
<pf-icon icon="arrow-down"></pf-icon> Scroll down to end of cyan box, 400px (default).
</div>
</div>
<pf-back-to-top href="#main" scrollable-selector="#scrollable-selector-example">Back to top</pf-back-to-top>
</div>
Scroll Distance
See scroll-distance in Attributes section below for more information.
View HTML Source
<div id="scroll-distance-example">
<div class="overflow" tabindex="0">
<div class="scroll-indicator">
<pf-icon icon="arrow-down"></pf-icon> Scroll down to end of cyan box, 100px.
</div>
</div>
<pf-back-to-top href="#main" scroll-distance="100" scrollable-selector="#scroll-distance-example">Back to top</pf-back-to-top>
</div>
Slots
-
icon -
Contains the prefix icon to display before the link or button.
- Default Slot
-
Text to display inside the link or button.
Attributes
icon-
Shorthand for the
iconslot, the value is icon name- DOM Property
icon- Type
-
string | undefined - Default
-
unknown
icon-set-
Icon set for the
iconproperty- DOM Property
iconSet- Type
-
string | undefined - Default
-
unknown
always-visible-
Flag to always show back to top button, defaults to false.
- DOM Property
alwaysVisible- Type
-
boolean - Default
-
false
scrollable-selector-
Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events
- DOM Property
scrollableSelector- Type
-
string | undefined - Default
-
unknown
scroll-distance-
Distance from the top of the scrollable element to trigger the visibility of the back to top button
- DOM Property
scrollDistance- Type
-
number - Default
-
400
label-
Accessible name for the back-to-top link, use when component does not have slotted text
- DOM Property
label- Type
-
string | undefined - Default
-
unknown
href-
Page fragment link to target element, must include hash ex: #top
- DOM Property
href- Type
-
string | undefined - Default
-
unknown
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-back-to-top--Right |
3rem`
|
|
--pf-c-back-to-top--Bottom |
1.5rem`
|
|
--pf-c-back-to-top--c-button--BoxShadow |
0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)
|
|
--pf-c-button--FontSize |
0.75rem
|
|
--pf-c-button--BorderRadius |
30em
|
|
--pf-c-button--PaddingTop |
0.25rem
|
|
--pf-c-button--PaddingRight |
0.5rem
|
|
--pf-c-button--PaddingBottom |
0.25rem
|
|
--pf-c-button--PaddingLeft |
0.5rem
|
|
--pf-c-button--m-primary--Color |
#fff
|
|
--pf-c-button--m-primary--BackgroundColor |
#06c
|
|
--pf-c-button__icon--m-end--MarginLeft |
0.25rem
|
CSS Shadow Parts
trigger-
The
<a>or<pf-button>element
