React Draggable Scroll To Top

A customizable, draggable scroll-to-top button component for React applications. Built with react-draggable-float-btn.

Features

• 🎯 Draggable - Drag and reposition anywhere on screen
• ⚡ Smooth scroll - Customizable animation with duration control
• ✨ Fade effect - Smooth opacity transitions when showing/hiding
• 🚫 Smart click - Prevents accidental clicks after dragging
• 📏 Multiple sizes - Small, medium, large presets
• 🎨 Fully customizable - Styles, colors, icons, positions
• 🔧 TypeScript - Full type definitions included

Installation

npm install react-draggable-scroll-to-top

or

yarn add react-draggable-scroll-to-top

Usage

Basic Usage

import React from "react";
import ScrollToTopDraggable from "react-draggable-scroll-to-top";

function App() {
  return (
    <div>
      <ScrollToTopDraggable />
      {/* Your content */}
    </div>
  );
}

Customization

<ScrollToTopDraggable
  size="large"
  showAfter={500}
  duration={800}
  defaultPosition="bottom-right"
  style={{ backgroundColor: "#4CAF50" }}
  onClick={() => console.log("Clicked")}
  onDragEnd={(pos) => console.log("Dragged to:", pos)}
>
  <YourCustomIcon />
</ScrollToTopDraggable>

All Props

| Prop | Type | Default | Description | | ----------------- | -------------------------------------------------------------- | -------------- | -------------------------------------------------------- | | className | string | '' | Custom CSS class name | | style | CSSProperties | {} | Custom inline styles | | children | ReactNode | Arrow icon | Custom content/icon | | onClick | () => void | undefined | Callback when button is clicked | | onDragStart | (position: { x: number, y: number }) => void | undefined | Callback when drag starts with current position | | onDragEnd | (position: { x: number, y: number }) => void | undefined | Callback when drag ends with final position | | defaultPosition | "bottom-right" \| "bottom-left" \| "top-right" \| "top-left" | bottom-right | Initial position preset (use this OR position, not both) | | position | { x: number, y: number } | undefined | Controlled position | | draggable | boolean | true | Enable/disable dragging | | size | "small" \| "medium" \| "large" | medium | Size of the button | | showAfter | number | 300 | Show button after scrolling X pixels | | smooth | boolean | true | Enable smooth scroll animation | | duration | number | 500 | Scroll animation duration (ms) | | behavior | 'auto' \| 'smooth' | 'smooth' | Native scroll behavior |

Advanced Usage

Controlled Position

const [pos, setPos] = useState({ x: 100, y: 100 });

<ScrollToTopDraggable position={pos} onDragEnd={setPos} />;

Save Position to LocalStorage

<ScrollToTopDraggable
  onDragEnd={(pos) => localStorage.setItem("btnPos", JSON.stringify(pos))}
/>

Different Sizes & Positions

<ScrollToTopDraggable size="small" defaultPosition="top-right" />
<ScrollToTopDraggable size="large" defaultPosition="bottom-left" />

TypeScript

Full TypeScript support with type definitions included:

import ScrollToTopDraggable, {
  ScrollToTopDraggableProps,
} from "react-draggable-scroll-to-top";

Notes

• Click prevention: react-draggable-float-btn automatically handles click prevention after dragging
• Visibility: Uses CSS opacity/visibility for smooth fade effects
• Position persistence: Component stays mounted to preserve drag position
• Next.js: Use "use client" directive for Next.js 13+ App Router
• Dependencies: react-draggable-float-btn is automatically installed as a dependency

License

MIT

Credits

Built with react-draggable-float-btn

Made with ❤️ for the React community