Skip to content
Versions v3 v2 v1

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. Back to top

Installation

npm install @patternfly/elements

Usage

Default

Back to top
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.

Scroll down to end of cyan box, 400px (default).
Back to top
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.

Scroll down to end of cyan box, 100px.
Back to top
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 icon slot, the value is icon name

DOM Property
icon
Type
string | undefined
Default
unknown
icon-set

Icon set for the icon property

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

© 2018-2024 Red Hat, Inc. Deploys by Netlify