Docs / Components
SenseScrollTopComponent
Floating scroll-to-top control from @artificialsenselabs/ui. Appears after the user scrolls past a threshold and returns focus 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" and ensure the parent element is the scrollable surface.
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. |
buttonAriaLabel | string | null | null | Accessible name for the button — falls back to i18n scroll-top.label. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual size preset for the circular button. |
styleClass | string | null | null | Extra class names merged onto the host element. |
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 and button use
aria-hidden="true"andtabindex="-1". - Inner chevron icon is decorative — the button label carries the accessible name.
- Focus ring uses design-token outline styles on
:focus-visible.