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 { BackToTop } from "@rhds/elements/react/rh-back-to-top/rh-back-to-top.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div id="overflow">
    <p>Scroll down to reveal the back to top element</p>
    <BackToTop href="#">Back to top</BackToTop>
  </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 { BackToTop } from "@rhds/elements/react/rh-back-to-top/rh-back-to-top.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <BackToTop visible="always" href="#top">Back to top</BackToTop>
);

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';
}

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 { BackToTop } from "@rhds/elements/react/rh-back-to-top/rh-back-to-top.js";
import { ContextDemo } from "@rhds/elements/react/rh-context-demo/rh-context-demo.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <ContextDemo>
    <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>
        <BackToTop href="#top">Back to top</BackToTop>
      </div>
    </div>
  </ContextDemo>
);

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 { BackToTop } from "@rhds/elements/react/rh-back-to-top/rh-back-to-top.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const 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>
    <BackToTop href="#top" label="Return 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>

import { BackToTop } from "@rhds/elements/react/rh-back-to-top/rh-back-to-top.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <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>
    <BackToTop scroll-distance="50" href="#top">Back to top</BackToTop>
  </div>
);