color-context.html

<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-context-demo>

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

<script type="module">
  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
  import '@patternfly/elements/pf-icon/pf-icon.js';
  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
</script>

<style>
  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-height: calc(100dvh - var(--pf-demo-header-height)) !important;
  }

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

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

  #bottom {
    position: absolute;
    bottom: 0;
  }

  rh-context-demo {
    height: auto;
  }

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


<script type="module">
  /* add support for demo/fullscreen and dev server */
  const b2t = document.querySelector('rh-back-to-top');
  const main = document.querySelector('main');
  // if main isn't scrollable use window
  if (window.getComputedStyle(main).overflow === 'scroll') {
    b2t.scrollableSelector = 'main';
  }
</script>