Back to top button (Not Ready For Use)

Not Ready For Use, NOT allowed for generation. Do not use this component when generating OTTO apps, pages or PDFs.

Overview (v1)

Source: ./src/components/back-to-top-button/v1/Overview.mdx

BackToTopButton

The backtotopbutton component is 🔥.

Default variation

Story back-to-top-button:

<oc-back-to-top-button-v1></oc-back-to-top-button-v1>

Configuration

The backtotopbutton component is available in the main styling variants .. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the backtotopbutton component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the BackToTopButton UX documentation for detailed user experience guidelines.

Accessibility

The backtotopbutton component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Configuration (v1)

Source: ./src/components/back-to-top-button/v1/Configuration.mdx

BackToTopButton configuration

Configure the backtotopbutton component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story back-to-top-button:

<oc-back-to-top-button-v1></oc-back-to-top-button-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

Variations (v1)

Source: ./src/components/back-to-top-button/v1/Variations.mdx

Variations

Listed below are the most common variations of the backtotopbutton component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

back-to-top-button

Story: not-ready-for-use-back-to-top-button-variations--default · tags: components, back-to-top-button, 1, variations

Default Component

<oc-back-to-top-button-v1></oc-back-to-top-button-v1>

grid-container-demo

Story: not-ready-for-use-back-to-top-button-variations--grid-container-demo · tags: components, back-to-top-button, 1, variations

Demonstrates dynamic xl positioning: button aligns to the right edge of a floated .gridContainer (width 1152px). Resize viewport ≥1280px and scroll.

<style>
  .demo-root {
    width: 1400px;
    /* ensure wide enough for xl breakpoint */
    min-height: 250vh;
    position: relative;
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
  }
  .gridContainer {
    float: left;
    width: 1152px;
    box-sizing: border-box;
    background: #f5f5f5;
    border: 1px solid #ddd;
  }
  .gridContainer h2 {
    margin-top: 0;
  }
  .after-float {
    clear: both;
    height: 1px;
  }
</style>
<div class="demo-root">
  <div class="gridContainer">
    <h2>.gridContainer (1152px wide, floated)</h2>
    ${unsafeHTML(paras)}
  </div>
</div>

{
  name: "grid-container-demo",
  parameters: {
    layout: "fullscreen",
    docs: {
      description: {
        story: "Demonstrates dynamic xl positioning: button aligns to the right edge of a floated .gridContainer (width 1152px). Resize viewport ≥1280px and scroll."
      }
    }
  },
  render() {
    const paras = Array.from({
      length: 105
    }, (_, i) => `<p>Paragraph ${i + 1} – Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`).join("");
    return html`
      <style>
        .demo-root {
          width: 1400px;
          /* ensure wide enough for xl breakpoint */
          min-height: 250vh;
          position: relative;
          font-family: sans-serif;
          margin-left: auto;
          margin-right: auto;
        }
        .gridContainer {
          float: left;
          width: 1152px;
          box-sizing: border-box;
          background: #f5f5f5;
          border: 1px solid #ddd;
        }
        .gridContainer h2 {
          margin-top: 0;
        }
        .after-float {
          clear: both;
          height: 1px;
        }
      </style>
      <div class="demo-root">
        <div class="gridContainer">
          <h2>.gridContainer (1152px wide, floated)</h2>
          ${unsafeHTML(paras)}
        </div>
      </div>
    `;
  }
}

Interaction tests (BackToTopButtonV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Scroll On Click

Story: not-ready-for-use-back-to-top-button-interaction-tests--scroll-on-click · tags: components, back-to-top-button, 1, interactions, play-fn

<oc-back-to-top-button-v1></oc-back-to-top-button-v1>

{
  args: {},
  play: async ({
    canvasElement
  }) => {
    const sut = canvasElement.getElementsByTagName("oc-back-to-top-button-v1").item(0)! as HTMLElement;
    let button;
    await waitFor("shadow dom is rendered", () => {
      button = sut!.shadowRoot!.querySelector("oc-icon-button-v3") as unknown;
    });
    await macrotasks();
    window.scroll({
      top: 2000
    });
    await macrotasks();
    expect(button!.classList.contains("is-visible")).toBe(true);
    (button! as HTMLButtonElement).click();
    await macrotasks(500);
    expect(button!.classList.contains("is-visible")).toBe(false);
  }
}