# scroll-behavior

> Applies `scroll-behavior`, defaulting to `"smooth"`, so anchor jumps and programmatic scrolls animate.

```ts
import { scrollBehavior } from "@sdxc/u/overflow";
```

Applies `scroll-behavior`, defaulting to `"smooth"`, so anchor jumps and
programmatic scrolls animate. Smooth scrolling is motion: wrap the call in
`u.motionSafe()` to honor a reduced-motion preference with an instant jump.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.scrollBehavior()` | `css({ scrollBehavior: "smooth" })` |
| `u.motionSafe(u.scrollBehavior())` | `css({ "@media (prefers-reduced-motion: no-preference)": { scrollBehavior: "smooth" } })` |
| `u.scrollBehavior("auto")` | `css({ scrollBehavior: "auto" })` |

## Examples

### Basic example

Use `scrollBehavior()`, which applies `smooth`, to animate anchor jumps and programmatic scrolls inside a scroll container. Click a link:

```tsx
<div mix={[vstack({ gap: 4 }), is(72), maxIs("100%")]}>
	<nav mix={[hstack({ gap: 3 })]}>
		<a href="#smooth-1">Section 1</a>
		<a href="#smooth-2">Section 2</a>
		<a href="#smooth-3">Section 3</a>
	</nav>
	<div mix={[scroll("y"), scrollBehavior(), vstack({ gap: 3 }), bs(48), ...]}>
		<section id="smooth-1" mix={[shrink(), bs(32), ...]}>
			Section 1
		</section>
		<section id="smooth-2" mix={[shrink(), bs(32), ...]}>
			Section 2
		</section>
		<section id="smooth-3" mix={[shrink(), bs(32), ...]}>
			Section 3
		</section>
	</div>
</div>
```

### Respecting reduced motion

Wrap the call in `motionSafe()` so the scroll animates only when the reader has not asked for less motion. Turn on Reduce motion in your system's accessibility settings and click a link again to see an instant jump:

```tsx
<div mix={[vstack({ gap: 4 }), is(72), maxIs("100%")]}>
	<nav mix={[hstack({ gap: 3 })]}>
		<a href="#calm-1">Section 1</a>
		<a href="#calm-2">Section 2</a>
		<a href="#calm-3">Section 3</a>
	</nav>
	<div
		mix={[scroll("y"), motionSafe(scrollBehavior()), vstack({ gap: 3 }), bs(48), ...]}
	>
		<section id="calm-1" mix={[shrink(), bs(32), ...]}>
			Section 1
		</section>
		<section id="calm-2" mix={[shrink(), bs(32), ...]}>
			Section 2
		</section>
		<section id="calm-3" mix={[shrink(), bs(32), ...]}>
			Section 3
		</section>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.scrollBehavior())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.scrollBehavior())
```

## Signature

```ts
u.scrollBehavior(value?: ScrollBehaviorValue)
```