# `PhiaUi.Components.BackToTop`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/navigation/back_to_top.ex#L1)

Floating "back to top" button that appears after scrolling past a threshold.

Reuses the `PhiaBackTop` hook from `priv/templates/js/hooks/back_top.js`.
The hook reads `data-threshold` and `data-smooth`, and toggles `opacity-0` /
`opacity-100` classes based on scroll position.

# `back_to_top`

Renders a floating scroll-to-top button controlled by the PhiaBackTop hook.

The button starts hidden (`opacity-0`) and the hook toggles to `opacity-100`
once the user has scrolled past the `threshold` value (default 200 px).

## Attributes

* `id` (`:string`) - Required by phx-hook. Defaults to `"back-to-top"`.
* `threshold` (`:integer`) - Scroll distance in px before the button appears. Defaults to `200`.
* `smooth` (`:boolean`) - Use smooth scroll when true. Defaults to `true`.
* `variant` (`:atom`) - Defaults to `:circle`. Must be one of `:circle`, or `:pill`.
* `position` (`:atom`) - Defaults to `:bottom_right`. Must be one of `:bottom_right`, `:bottom_left`, or `:bottom_center`.
* `class` (`:string`) - Defaults to `nil`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*