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

BackTop component — a floating "scroll to top" button.

Rendered as a fixed circular button in the bottom-right corner of the
viewport. It starts invisible (`opacity-0`) and becomes visible
(`opacity-100`) once the user has scrolled past the configured threshold.
Scrolling behaviour is handled by the `PhiaBackTop` LiveView hook defined
in `priv/templates/js/hooks/back_top.js`.

## Examples

    <%!-- Default: shows after 200 px, smooth scroll --%>
    <.back_top />

    <%!-- Custom threshold and label --%>
    <.back_top threshold={400} aria_label="Back to top" />

    <%!-- Disable smooth scroll --%>
    <.back_top smooth={false} />

    <%!-- Additional CSS classes --%>
    <.back_top class="z-50" />

# `back_top`

Renders a fixed floating button that scrolls the page to the top.

The button starts invisible and is shown by the `PhiaBackTop` JS hook
once the page scroll exceeds `threshold` pixels. Clicking the button
scrolls to the top using the browser's native `scrollTo` API.

## Examples

    <.back_top />

    <.back_top threshold={300} smooth={false} aria_label="Go to top" />

    <.back_top class="z-50" />

## Attributes

* `id` (`:string`) - HTML id for the button element. Defaults to `"back-top"`.
* `threshold` (`:integer`) - Scroll distance in pixels before the button becomes visible. Defaults to `200`.
* `smooth` (`:boolean`) - When true, scrolls smoothly to the top; false uses instant jump. Defaults to `true`.
* `aria_label` (`:string`) - Accessible label for the button. Defaults to `"Scroll to top"`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.

---

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