Back to Top

# Basic Usage

<x-back-to-top />

# Positions

<!-- Available Positions: bottom-right (default), bottom-left -->
 
<x-back-to-top position="bottom-left" />

# Icon

The button displays a chevron-up icon by default. You can change it using the icon attribute:

<x-back-to-top icon="arrow-up" />

# Square Variation

Use the square attribute to render the button with rounded corners instead of a full circle:

<x-back-to-top square />

# Size Variations

<x-back-to-top xs />
<x-back-to-top sm />
<x-back-to-top /> <!-- md (default) -->
<x-back-to-top lg />

# Color Variations

<x-back-to-top color="red" />
<x-back-to-top color="emerald" />
<x-back-to-top color="blue" />

Instead of relying on scroll position, you can pass a CSS selector to the anchor attribute. The component uses the IntersectionObserver API to detect when the observed element leaves the viewport, then shows the button:

<!-- The button appears when the observed element scrolls out of the viewport. -->
 
<div id="hero">
    <!-- Hero section content -->
</div>
 
<x-back-to-top anchor="#hero" />

# Immediate

An option to scroll to top instantly without any animation.

<x-back-to-top immediate />