A minimal floating button that appears when the user scrolls up, allowing them to jump back to the bottom of the chat.
Item 1
This is a sample item to demonstrate scrolling behavior.
Item 2
This is a sample item to demonstrate scrolling behavior.
Item 3
This is a sample item to demonstrate scrolling behavior.
Item 4
This is a sample item to demonstrate scrolling behavior.
Item 5
This is a sample item to demonstrate scrolling behavior.
Item 6
This is a sample item to demonstrate scrolling behavior.
Item 7
This is a sample item to demonstrate scrolling behavior.
Item 8
This is a sample item to demonstrate scrolling behavior.
Item 9
This is a sample item to demonstrate scrolling behavior.
Item 10
This is a sample item to demonstrate scrolling behavior.
Installation
Install dependencies
Install the required packages for this component:
Install shadcn-svelte components
Install the required shadcn-svelte components for this component:
Copy the Source Code
Copy and paste the following code into your project:
Examples
Basic usage
The original standalone scroll-area example rewritten to use `ScrollButton.Root`, `ScrollButton.Content`, and `ScrollButton.Button`.
Item 1
This is a sample item to demonstrate scrolling behavior.
Item 2
This is a sample item to demonstrate scrolling behavior.
Item 3
This is a sample item to demonstrate scrolling behavior.
Item 4
This is a sample item to demonstrate scrolling behavior.
Item 5
This is a sample item to demonstrate scrolling behavior.
Item 6
This is a sample item to demonstrate scrolling behavior.
Item 7
This is a sample item to demonstrate scrolling behavior.
Item 8
This is a sample item to demonstrate scrolling behavior.
Item 9
This is a sample item to demonstrate scrolling behavior.
Item 10
This is a sample item to demonstrate scrolling behavior.
Item 11
This is a sample item to demonstrate scrolling behavior.
Item 12
This is a sample item to demonstrate scrolling behavior.
Item 13
This is a sample item to demonstrate scrolling behavior.
Item 14
This is a sample item to demonstrate scrolling behavior.
Item 15
This is a sample item to demonstrate scrolling behavior.
Item 16
This is a sample item to demonstrate scrolling behavior.
Item 17
This is a sample item to demonstrate scrolling behavior.
Item 18
This is a sample item to demonstrate scrolling behavior.
Item 19
This is a sample item to demonstrate scrolling behavior.
Item 20
This is a sample item to demonstrate scrolling behavior.
Variant switching
Toggle the button variant at runtime while keeping the scroll behavior unchanged.
Item 1
This is a sample item to demonstrate scrolling behavior.
Item 2
This is a sample item to demonstrate scrolling behavior.
Item 3
This is a sample item to demonstrate scrolling behavior.
Item 4
This is a sample item to demonstrate scrolling behavior.
Item 5
This is a sample item to demonstrate scrolling behavior.
Item 6
This is a sample item to demonstrate scrolling behavior.
Item 7
This is a sample item to demonstrate scrolling behavior.
Item 8
This is a sample item to demonstrate scrolling behavior.
Item 9
This is a sample item to demonstrate scrolling behavior.
Item 10
This is a sample item to demonstrate scrolling behavior.
Item 11
This is a sample item to demonstrate scrolling behavior.
Item 12
This is a sample item to demonstrate scrolling behavior.
Item 13
This is a sample item to demonstrate scrolling behavior.
Item 14
This is a sample item to demonstrate scrolling behavior.
Item 15
This is a sample item to demonstrate scrolling behavior.
Item 16
This is a sample item to demonstrate scrolling behavior.
Item 17
This is a sample item to demonstrate scrolling behavior.
Item 18
This is a sample item to demonstrate scrolling behavior.
Item 19
This is a sample item to demonstrate scrolling behavior.
Item 20
This is a sample item to demonstrate scrolling behavior.
Props
ScrollButton
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes for the button. |
variant | ButtonVariant | "outline" | Button variant used for the scroll control. |
size | ButtonSize | "sm" | Button size used for the scroll control. |
ref | HTMLElement | null | - | Bindable reference to the rendered button element. |
onclick | (event: MouseEvent) => void | - | Called after scrolling to the bottom. |
ScrollButtonRoot
| Prop | Type | Default | Description |
|---|---|---|---|
ref | HTMLDivElement | null | - | Bindable reference to the scroll container. |
children | Snippet | - | Scrollable content rendered inside the root. |
class | string | - | Additional CSS classes for the scroll container. |
resize | ScrollButtonAnimation | "smooth" | Animation used when the scroll area resizes. |
initial | ScrollButtonInitialAnimation | "instant" | Initial animation used when mounting the scroll area. |
ScrollButtonContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | - | Scrollable content area rendered inside the wrapper. |
class | string | - | Additional CSS classes for the content wrapper. |