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" />Summary
Functions
Renders a fixed floating button that scrolls the page to the top.
Functions
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 to200.smooth(:boolean) - When true, scrolls smoothly to the top; false uses instant jump. Defaults totrue.aria_label(:string) - Accessible label for the button. Defaults to"Scroll to top".class(:string) - Additional CSS classes merged via cn/1. Defaults tonil.