"use client"; import * as React from "react"; import { AnimatePresence, motion, useScroll } from "motion/react"; import { cn } from "@kineticui/core"; export type BackToTopProps = { /** Show after scrolling this many px. */ threshold?: number; /** Ring that fills as the page is read. */ showProgress?: boolean; className?: string; }; /** Floating button that scrolls to the top, with a reading-progress ring. */ export function BackToTop({ threshold = 600, showProgress = true, className }: BackToTopProps) { const { scrollY, scrollYProgress } = useScroll(); const [visible, setVisible] = React.useState(false); React.useEffect(() => { setVisible(scrollY.get() > threshold); return scrollY.on("change", (y) => setVisible(y > threshold)); }, [scrollY, threshold]); return ( {visible ? ( window.scrollTo({ top: 0, behavior: "smooth" })} className={cn( "fixed bottom-6 right-6 z-40 flex size-[52px] items-center justify-center rounded-full bg-surface-overlay text-foreground shadow-overlay outline-none focus-visible:ring-2 focus-visible:ring-foreground", className, )} > {showProgress ? ( ) : null} ) : null} ); }

Back to Top

Installation

Exports