Skip to main content
astrocraft-ui/ components · 101
Shop

Back To Top

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Video PlayerBreadcrumb →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

Install command
npx astrocraft-ui add navigation/back-to-top

Plain-CSS theme — no build step

Install command
npx astrocraft-ui add navigation/back-to-top --theme css

Tailwind theme — needs Tailwind v4

Install command
npx astrocraft-ui add navigation/back-to-top --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add navigation/back-to-top --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add navigation/back-to-top --theme tailwind --bridge lumos

Live demo

BackToTop & SkipLink

Both are focus moves that happen to scroll, which is the half everyone drops. The button below appears once you are 400px down and sends the caret — not just the viewport — back to <main>. SkipLink is not in this box at all: it is the first element in the page's <body>, which is the only place a bypass block means anything. Reload and press Tab.

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

ComponentSlotsVariantsRuntime stateNative state
`BackToTop.astro``back-to-top`——`[hidden]`

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/navigation/back-to-top/BackToTop.astro
---
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  threshold?: number;
  for?: string;
};

const { threshold = 400, for: target, class: className, ...rest } = Astro.props;
---

<button
  type="button"
  hidden
  class={className}
  data-slot="back-to-top"
  data-threshold={threshold}
  data-for={target}
  {...rest}
>
  <slot>Back to top</slot>
</button>

<script>
  import { onReady } from "../../_client";

  function sync(btn: HTMLElement) {
    btn.hidden = window.scrollY <= (Number(btn.dataset.threshold) || 0);
  }

  window.addEventListener(
    "scroll",
    () => document.querySelectorAll<HTMLElement>('[data-slot="back-to-top"]').forEach(sync),
    { passive: true },
  );

  document.addEventListener("click", (event) => {
    if (!(event.target instanceof Element)) return;
    const btn = event.target.closest<HTMLElement>('[data-slot="back-to-top"]');
    if (!btn) return;

    const id = btn.dataset.for;
    const target = (id && document.getElementById(id)) || document.body;
    if (target.tabIndex < 0) target.tabIndex = -1;
    target.focus({ preventScroll: true });

    window.scrollTo({
      top: 0,
      behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth",
    });
  });

  onReady('[data-slot="back-to-top"]', sync);
</script>
src/components/ui/navigation/back-to-top/index.ts
import BackToTop from "./BackToTop.astro";

export { BackToTop };
export default BackToTop;

What you get

The component source, copied into your project by npx astrocraft-ui add navigation/back-to-top — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.