Scroll Button
A floating button that appears when users scroll up in chat containers, providing quick navigation back to the bottom with smooth scrolling behavior and context-based visibility management.
Installation
Copy and paste the following code into your project.
Examples
Basic Usage
The ScrollButton component works with a scroll context. Set up the context in a parent component and bind it to a scrollable container. The button automatically appears when scrolling up and hides when at the bottom.
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.
Custom Styling
Customize the button's appearance using different variants and sizes. The button supports all standard button variants.
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.
Usage Guide
Setting Up the Context
The ScrollButton requires a scroll context to track the scroll position. Create the context in a parent component and bind it to your scrollable container:
Positioning the Button
Position the ScrollButton absolutely within your container. It's typically placed in the bottom-right corner:
Integration with ChatContainer
The ScrollButton pairs perfectly with the ChatContainer component. Both use similar context patterns for scroll management. See the ChatContainer documentation for integration examples.
Component API
ScrollButton
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "secondary" | "ghost" | "link" | "destructive" | "outline" | The visual style of the button |
size | "default" | "sm" | "lg" | "icon" | "sm" | The size of the button |
class | string | - | Additional CSS classes for custom styling |
ref | HTMLElement | null | - | Reference to the button element |
onclick | (event: MouseEvent) => void | - | Click event handler |
Scroll Context API
The scroll context provides functions and state for managing scroll behavior:
Scroll Context
| Prop | Type | Default | Description |
|---|---|---|---|
setScrollContext() | () => ScrollContext | - | Creates and sets the scroll context. Must be called in a parent component. |
getScrollContext() | () => ScrollContext | - | Retrieves the scroll context. Used internally by ScrollButton. |
scrollContext.setElement() | (element: HTMLElement | null) => void | - | Sets the scrollable container element to monitor. |
scrollContext.scrollToBottom() | (behavior?: ScrollBehavior) => void | - | Scrolls the container to the bottom with optional behavior ('smooth' or 'instant'). |
scrollContext.isAtBottom | boolean | - | Reactive state indicating if the container is scrolled to the bottom. |
Features
- Context-based visibility: Automatically shows/hides based on scroll position
- Smooth animations: Elegant fade and slide transitions
- Customizable styling: Supports all button variants and sizes
- SSR-safe: Handles server-side rendering gracefully
- Threshold detection: Configurable threshold for bottom detection (50px default)
- Smooth scrolling: Uses native smooth scroll behavior