Back to top

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.0/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-back-to-top/rh-back-to-top.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/rh-back-to-top/rh-back-to-top.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.11/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@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": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.0/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.0/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
</script>
Copy to Clipboard Wrap lines

Usage

<div id="overflow">
  <rh-back-to-top href="#">Back to top</rh-back-to-top>
</div>

<script type="module">
  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
</script>
Copy to Clipboard Wrap lines

rh-back-to-top

Back to top component is a fragment link that allows users to quickly navigate to the top of a lengthy content page.

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