Scroll To Top
Floating button that appears after scrolling and returns the user to the top of the page.
<arc-scroll-to-top>Overview
ScrollToTop renders a fixed-position button that fades into view once the user scrolls past a configurable threshold (default 300px). Clicking it scrolls the page back to the top using the browser's native smooth scroll behavior. The component handles its own visibility state via a throttled passive scroll listener, so you only need to place the element in your page.
The button uses a circular design with a chevron-up icon, positioned in the bottom-right corner by default. Both the corner placement and the edge offset are configurable via the position and offset properties. The show/hide animation uses opacity and translateY for a fade-and-slide effect.
The button has aria-label="Scroll to top" and focus styles. The component also respects prefers-reduced-motion: when the user has opted out of motion, smooth scrolling is replaced with an instant jump and the CSS transition is disabled.
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 that avoids layout thrashing
- Configurable corner placement: bottom-right or bottom-left
- Configurable edge offset via CSS length values
- Circular button with chevron-up icon, styled with tokens
- Accessible: `aria-label`, focus-visible glow, keyboard operable
Preview
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.
offsetstring'var(--space-lg)'- Distance from viewport edges. Accepts any CSS length value.
smoothbooleantrue- Use smooth scrolling animation. Falls back to instant when prefers-reduced-motion is set.
position'bottom-right' | 'bottom-left''bottom-right'- Corner placement.