Back to top

Overview Style Guidelines Code Demos Accessibility
  1. rh-back-to-top
  1. rh-back-to-top

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-back-to-top/rh-back-to-top.js": "./elements/rh-back-to-top/rh-back-to-top.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/rh-icon/rh-icon.js": "./elements/rh-icon/rh-icon.js",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

rh-back-to-top

Slots 1
Slot Name Description

Text for the back to top link
Attributes 4
Attribute DOM Property Description Type Default
visible visible

Flag to always show back to top button, defaults to false.

 
'always' | undefined | undefined

unknown
scrollable-selector scrollableSelector

Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events

 
string | undefined

unknown
scroll-distance scrollDistance

Distance from the top of the scrollable element to trigger the visibility of the back to top button

 
number

400
href href

Page fragment link to target element, must include hash ex: #top

 
string | undefined

unknown
Methods 0

None

 Events 0

None

 CSS Shadow Parts 1
Part Name Description
trigger

back to top link anchor element
CSS Custom Properties 0

None

 Design Tokens 12
Token Copy
--rh-border-radius-pill
--rh-border-width-md
--rh-color-accent-base-on-light
--rh-color-border-strong-on-dark
--rh-color-interactive-primary-hover-on-light
--rh-color-text-primary-on-dark
--rh-font-size-body-text-xs
--rh-line-height-body-text
--rh-space-3xl
--rh-space-md
--rh-space-xl
--rh-space-xs

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub