Scroll Button
A floating button component that appears when users scroll up in a container, allowing them to quickly return to the bottom of the content with a single click.
Examples
Basic Scroll Button
A simple implementation of the scroll button that appears when scrolling up and disappears when at the bottom of the container.
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 Scroll Button
Customize the appearance and behavior of the scroll button with different variants, sizes, and threshold values.
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.
With Chat Container
The ScrollButton works perfectly with ChatContainer for chat interfaces, providing an easy way for users to navigate long conversations.
Of course! I'd be happy to help with your coding question. What would you like to know?
Creating a responsive layout with CSS Grid is straightforward. Here's a basic example:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
This creates a grid where:
- Columns automatically fit as many as possible
- Each column is at least 250px wide
- Columns expand to fill available space
- There's a 1rem gap between items
Would you like me to explain more about how this works?
Installation
npx shadcn add "https://prompt-kit.com/c/scroll-button.json"Component API
ScrollButton
| Prop | Type | Default | Description |
|---|---|---|---|
| scrollRef | React.RefObject<HTMLElement> | Reference to the element to scroll to | |
| containerRef | React.RefObject<HTMLElement> | Reference to the scrollable container | |
| className | string | Additional CSS classes | |
| threshold | number | 50 | Distance from bottom (in px) to show/hide the button |
| variant | "default" | "outline" | "ghost" | etc. | "outline" | Button variant from your UI button component |
| size | "default" | "sm" | "lg" | etc. | "sm" | Button size from your UI button component |
| ...props | React.ButtonHTMLAttributes<HTMLButtonElement> | All other button props |