Docs / Components
SenseScrollTopComponent
Floating scroll-to-top control from @artificialsenselabs/ui. Appears after the user scrolls past a threshold and returns to the top of the window or a parent scroll container.
Live demo: run nx serve showcase and open /components/scroll-top (port 4202).
Overview
Category: Layout. Selector: sense-scroll-top. Import: import { SenseScrollTopComponent } from '@artificialsenselabs/ui';
<sense-scroll-top [threshold]="300" /> Place one instance near the end of long pages for target="window" (default). For nested scroll areas, set target="parent"; the parent must be the scrollable surface and establish a positioning context (e.g. position: relative). No surface variant — this is a primary FAB, not panel chrome.
Inputs & outputs
| API | Type | Default | Description |
|---|---|---|---|
threshold | number | 400 | Scroll offset in pixels before the control becomes visible. |
target | 'window' | 'parent' | 'window' | Scroll surface to observe and scroll back to top. |
behavior | 'smooth' | 'auto' | 'smooth' | Native scrollTo behavior. smooth yields to prefers-reduced-motion: reduce. |
buttonAriaLabel | string | null | null | Accessible name for the button — falls back to i18n scroll-top.label. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual size preset (padding + icon). Hit area stays ≥ touch-target minimum. |
scrollTopClick | SenseScrollTopClickEvent | — | Emitted when the user activates the control (includes originalEvent). |
Accessibility
- Pattern:ARIA button with an accessible name via
buttonAriaLabelor the default i18n label. - Hidden state: host uses
aria-hidden+inert; button usestabindex="-1". Activation blurs the button so focus is not left on a hidden control. - Inner chevron icon is decorative — the button label carries the accessible name.
behavior="smooth"respectsprefers-reduced-motion(forces instant scroll). CSS show/hide transitions also pause under reduced motion.- Focus ring uses design-token outline styles on
:focus-visible.