Scroll To Top — ARC UI

Components

Scroll To Top

navigation

interactive

<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

Place inside a scrollable container — it listens to window scroll
Add multiple ScrollToTop instances on the same page
Set the threshold too low — the button should appear after meaningful scrolling
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

Live on this page. Scroll down to see the button appear in the bottom-right corner, then click it to return here.

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>
    <ScrollToTop></ScrollToTop>
  `,
})
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

Prop	Type	Default	Description
`threshold`	`number`	`300`	Scroll distance in pixels before the button becomes visible.
`smooth`	`boolean`	`true`	Use smooth scrolling animation. Falls back to instant when prefers-reduced-motion is set.
`position`	`string`	`bottom-right`	Corner placement: "bottom-right" or "bottom-left".
`offset`	`string`	`var(--space-lg)`	Distance from viewport edges. Accepts any CSS length value.