The scroll button I've created smoothly transitions between "Scroll to Bottom" and "Scroll to Top" functionality as you scroll through the page. Here's how it works:

1. When the page loads, the button appears as "Scroll to Bottom" with a down arrow

2. As you scroll past the halfway point of the page, the button animates:

   • The text changes from "Scroll to Bottom" to "Scroll to Top"
   • The arrow rotates 180° to point upward
   • A subtle scale animation occurs during the transition

3. Clicking the button will:

   • Scroll to the bottom when in "Scroll to Bottom" mode
   • Scroll to the top when in "Scroll to Top" mode
   • Use smooth scrolling animation for a pleasant user experience

4. The button automatically hides when:

   • You're at the very top (when in "Scroll to Bottom" mode)
   • You're at the very bottom (when in "Scroll to Top" mode)

The component uses:

• React's useEffect to track scroll position
• Tailwind CSS for styling and transitions
• Lucide React for the arrow icons
• CSS transitions for smooth animations 1

You can customize the button's appearance by modifying the Tailwind classes in the scroll-button.tsx file.