Back to top

#Example

<a href="#top" class="back-to-top back-to-top-static" aria-label="Back to top"></a>

#Classes

2 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

.back-to-top::before {
  mask-image: var(--m-nav-up);
}

.back-to-top:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
}

.back-to-top-static {
  position: static;
}

@supports (animation-timeline: scroll()) {
  .back-to-top:not(.back-to-top-static) {
    animation: m-nav-reveal linear both;
    animation-timeline: scroll(root);
    animation-range: 0 20rem;
  }
}

#Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Back to top: start from the base class, then add modifiers -->
<a href="#top" class="back-to-top back-to-top-static" aria-label="Back to top"></a>

#Accessibility

• Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.

#Related components