Overview
The BackToTop component is a high-end utility for long scrolling pages. Unlike simple anchor links, this component uses framer-motion to monitor scroll progress, only fading in after the user scrolls past a predefined threshold. It features an SVG circle that traces the exact percentage of the page scrolled, providing subtle but premium visual feedback.
Usage
import { BackToTop } from "@/components/creative/back-to-top"
export default function Layout({ children }) {
return (
<main>
{children}
<BackToTop
threshold={300}
position="bottom-right"
showProgress={true}
/>
</main>
)
}
Usage Guide
1. Import the Component
Import the component into your React or Next.js page:
import { BackToTop } from "@/components/creative/back-to-top";
2. Implementation Example
Render the component and customize its behavior by passing props:
import { BackToTop } from "@/components/creative/back-to-top";
export default function Example() {
return (
<div className="w-full flex items-center justify-center p-8">
<BackToTop
scrollContainerRef{/* value */}
threshold{10}
showProgress{true}
/>
</div>
);
}