Scroll To Top
Floating button that appears after scrolling and smoothly returns the user to the top of the page.
<arc-scroll-to-top> Overview
Guidelines
When to use
- Place once at the page level, outside scrolling containers
- Use on long pages where scrolling back to the top is common
- Adjust the threshold for pages with different scroll depths
- Pair with ScrollSpy for complete scroll navigation
When not to use
- Do not place inside a scrollable container — it listens to window scroll
- Do not add multiple ScrollToTop instances on the same page
- Do not set the threshold too low — the button should appear after meaningful scrolling
- Do not override the aria-label without providing an equivalent accessible name
Features
- Auto show/hide based on scroll position with configurable threshold
- Smooth scroll to top with `prefers-reduced-motion` fallback to instant
- Passive, throttled scroll listener for zero layout thrashing
- Configurable corner placement: bottom-right or bottom-left
- Configurable edge offset via CSS length values
- Circular button with chevron-up icon, fully token-styled
- Accessible: `aria-label`, focus-visible glow, keyboard operable
Preview
Note
Usage
This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.
<!-- Place once at the page level -->
<arc-scroll-to-top></arc-scroll-to-top>
<!-- Custom threshold and position -->
<arc-scroll-to-top threshold="500" position="bottom-left"></arc-scroll-to-top>import { ScrollToTop } from '@arclux/arc-ui-react';
export function Layout({ children }) {
return (
<>
{children}
<ScrollToTop threshold={400} />
</>
);
}<script setup>
import { ScrollToTop } from '@arclux/arc-ui-vue';
</script>
<template>
<main>
<slot />
</main>
<ScrollToTop />
</template><script>
import { ScrollToTop } from '@arclux/arc-ui-svelte';
</script>
<main>
<slot />
</main>
<ScrollToTop />import { Component } from '@angular/core';
import { ScrollToTop } from '@arclux/arc-ui-angular';
@Component({
imports: [ScrollToTop],
template: `
<main>
<ng-content></ng-content>
</main>
<arc-scroll-to-top></arc-scroll-to-top>
`,
})
export class LayoutComponent {}import { ScrollToTop } from '@arclux/arc-ui-solid';
export function Layout(props) {
return (
<>
{props.children}
<ScrollToTop />
</>
);
}import { ScrollToTop } from '@arclux/arc-ui-preact';
export function Layout({ children }) {
return (
<>
{children}
<ScrollToTop />
</>
);
}API
-
thresholdnumber300 - Scroll distance in pixels before the button becomes visible.
-
smoothbooleantrue - Use smooth scrolling animation. Falls back to instant when prefers-reduced-motion is set.
-
position'bottom-right' | 'bottom-left''bottom-right' - Corner placement.
-
offsetstring'var(--space-lg)' - Distance from viewport edges. Accepts any CSS length value.