PhiaUi.Components.BackToTop (phia_ui v0.1.17)

Copy Markdown View Source

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.

Summary

Functions

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

Functions

back_to_top(assigns)

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.