Back to top

import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';

#overflow {
  min-block-size: calc(100dvh + 401px);
}

p {
  font-weight: bold;
}

<div id="overflow">
  <p>Scroll down to reveal the back to top element</p>
  <rh-back-to-top href="#">Back to top</rh-back-to-top>
</div>

import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';

main {
  display: block;
  scroll-behavior: smooth;
  max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
}
#bottom {
  position: absolute;
  inset-block-end: 0;
}
#nav {
  block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important;
}

<rh-back-to-top visible="always" href="#top">Back to top</rh-back-to-top>

import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
/* add support for demo/fullscreen and dev server */
const b2t = document.querySelector('rh-back-to-top');
const main = document.querySelector('main, [role="main"]');
// if main isn't scrollable use window
if (window.getComputedStyle(main).overflow === 'scroll') {
  b2t.scrollableSelector = 'main';
}

a {
  color: var(--rh-color-interactive-blue-darker, #0066cc);
}

a:is(:hover,:focus) {
  color: var(--rh-color-interactive-blue-darkest, #003366);
}

[color-palette^="dark"] a {
  color: var(--rh-color-accent-base-on-dark, #92c5f9);
}

[color-palette^="dark"] a:is(:hover,:focus) {
  color: var(--rh-color-interactive-blue-lightest, #b9dafc);
}

main {
  display: block;
  scroll-behavior: smooth;
  max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
}

#nav {
  block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
}

#overflow {
  min-block-size: calc(100dvh + 401px);
  position: relative;
}

#bottom {
  position: absolute;
  inset-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  main {
    scroll-behavior: auto;
  }
}

<rh-context-demo>
  <div id="overflow">
    <a id="top" href="#bottom">Go to bottom</a>
    <p>Scroll down or press tab to see the back to top button</p>
    <a id="bottom" href="#top">Go to top</a>
  <div>


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







</div></div></rh-context-demo>

import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
/* add support for demo/fullscreen and dev server */
const b2t = document.querySelector('rh-back-to-top');
const main = document.querySelector('main, [role="main"]');
// if main isn't scrollable use window
if (window.getComputedStyle(main).overflow === 'scroll') {
  b2t.scrollableSelector = 'main';
}

main {
  display: block;
  scroll-behavior: smooth;
  max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
}

#nav {
  block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
}

#overflow {
  min-block-size: calc(100dvh + 401px);
  position: relative;
}

#bottom {
  position: absolute;
  inset-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  main {
    scroll-behavior: auto;
  }
}

<div id="overflow">
  <a id="top" href="#bottom">Go to bottom</a>
  <p>Scroll down or press tab to see the back to top button</p>
  <a id="bottom" href="#top">Go to top</a>
  <rh-back-to-top href="#top" label="Return to top"></rh-back-to-top>
</div>

import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
/* add support for demo/fullscreen and dev server */
const b2t = document.querySelector('rh-back-to-top');
const main = document.querySelector('main, [role="main"]');
// if main isn't scrollable use window
if (window.getComputedStyle(main).overflow === 'scroll') {
  b2t.scrollableSelector = 'main';
}

main {
  display: block;
  scroll-behavior: smooth;
  max-block-size: calc(100dvh - var(--pf-demo-header-height)) !important;
}

#nav {
  block-size: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
}

#overflow {
  /* scroll distance set to 50px */
  min-block-size: calc(100dvh + 51px);
  position: relative;
}

#bottom {
  position: absolute;
  inset-block-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  main {
    scroll-behavior: auto;
  }
}

<div id="overflow">
  <a id="top" href="#bottom">Go to bottom</a>
  <p>Scroll down (50px) or press tab to see the back to top button</p>
  <a id="bottom" href="#top">Go to top</a>
  <rh-back-to-top scroll-distance="50" href="#top">Back to top</rh-back-to-top>
</div>