Scroll Button

Buttons 52

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scroll Button to your project and fits it to your theme.

Code

How Scroll Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { ScrollButton } from "@/components/ui/scroll-button"
import { useRef, useState } from "react"

export function ScrollButtonBasic() {
  const containerRef = useRef<HTMLDivElement>(null)
  const bottomRef = useRef<HTMLDivElement>(null)

  const [content] = useState(
    Array(20)
      .fill(0)
      .map((_, i) => (
        <div key={i} className="border-b p-3">
          <h3 className="font-medium">Item {i + 1}</h3>
          <p className="text-muted-foreground">
            This is a sample item to demonstrate scrolling behavior.
          </p>
        </div>
      ))
  )

  return (
    <div className="relative flex h-[400px] w-full flex-col overflow-hidden">
      <div
        ref={containerRef}
        className="flex h-full w-full flex-col items-center justify-center overflow-y-auto"
      >
        {content}
        <div ref={bottomRef} />
      </div>

      <div className="absolute right-12 bottom-4">
        <ScrollButton containerRef={containerRef} scrollRef={bottomRef} />
      </div>
    </div>
  )
}