Back to Top

# Concept

The back-to-top component renders a fixed-position floating button that appears when the user scrolls down the page. Clicking it smoothly scrolls back to the top. By default, the button appears after scrolling 200px and uses a smooth scroll animation. You can also configure it to observe a specific element using the IntersectionObserver API, showing the button when that element leaves the viewport.

# Basic Usage

<x-back-to-top />

# Positions

You can control which corner of the screen the button appears in using the position attribute. The default position is bottom-right .

<!-- 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 with any Heroicon name:

<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

The color attribute changes the button color. All TailwindCSS colors are available.

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

# Anchor Observer

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

Use the immediate attribute to scroll back to the top instantly instead of using a smooth animation:

<x-back-to-top immediate />