ScrollControls

Up and down scroll buttons between page sections and the call to action.

Usage

svelte

<script lang="ts">
  import { ScrollControls } from "@milandekruijf/ui/svelte";
</script>

<ScrollControls ctaId="page-cta" direction="both" docked />

Examples

Docked controls

<script lang="ts">
  import { ScrollControls } from "@milandekruijf/ui/svelte";
</script>

<ScrollControls docked />

Props

Prop	Type	Default	Description
ctaId?	`string`	"page-cta"	Id of the in-page call to action the down button jumps to.
topMargin?	`number`	200	Up is enabled once scrolled farther than this from the top.
bottomMargin?	`number`	320	Down is disabled within this distance of the bottom.
ctaOffset?	`number`	80	Breathing room above the CTA when jumping to it.
docked?	`boolean`	false	Docks into the right-side rail instead of floating bottom-right.
direction?	`"both" \| "up" \| "down"`	"both"	Which control(s) to render.
reactiveKey?	`unknown`	—	Re-evaluates enabled states when it changes (e.g. the router pathname).
labels?	`{ backToTop?; nextCta? }`	—	Accessible button labels; defaults are English.
class?	`string`	—	Extra classes merged after the base classes.