Back to Top
Back to Top component.
Back to Top, Customization Blocks
Example:
// AppServiceProvider, "boot" method. TallStackUi::customize() ->backToTop() ->block('block', 'classes');
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.
<x-back-to-top />
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" />
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" />
Use the square
attribute to render the button with rounded corners
instead of a full circle:
<x-back-to-top square /><x-back-to-top xs /><x-back-to-top sm /><x-back-to-top /> {{-- md (default) --}}<x-back-to-top lg />
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" />
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" />
Use the immediate
attribute to scroll back to the top instantly
instead of using a smooth animation:
<x-back-to-top immediate />