Move To Top

1"use client";
2 
3import {
4  motion,
5  AnimatePresence,
6  useScroll,
7  useMotionValueEvent,
8  useTransform,
9} from "motion/react";
10import { useRef, useState } from "react";
11import { cn } from "../lib/utils";
12 
13type Mode = "down" | "up";
14 
15interface MoveToTopProps {
16  className?: string;
17  size?: number;
18}
19 
20export default function MoveToTop({ className, size = 44 }: MoveToTopProps) {
21  const [iconMode, setIconMode] = useState<Mode>("down");
22 
23  const { scrollY, scrollYProgress } = useScroll();
24 
25  const lastY = useRef(0);
26  const directionRef = useRef<Mode>("down");
27 
28  useMotionValueEvent(scrollY, "change", (y) => {
29    if (y > lastY.current + 4) {
30      directionRef.current = "down";
31    } else if (y < lastY.current - 4) {
32      directionRef.current = "up";
33    }
34 
35    lastY.current = y;
36  });
37 
38  useMotionValueEvent(scrollYProgress, "change", (p) => {
39    const next: Mode =
40      p <= 0.01 ? "down" : p >= 0.99 ? "up" : directionRef.current;
41 
42    setIconMode((prev) => (prev === next ? prev : next));
43  });
44 
45  const r = (size - 4) / 2;
46  const cx = size / 2;
47  const cy = size / 2;
48  const circumference = 2 * Math.PI * r;
49  const dashoffset = useTransform(
50    scrollYProgress,
51    (p) => circumference * (1 - p)
52  );
53 
54  const handleClick = () => {
55    if (iconMode === "down") {
56      window.scrollTo({
57        top: document.documentElement.scrollHeight,
58        behavior: "smooth",
59      });
60      return;
61    }
62    window.scrollTo({ top: 0, behavior: "smooth" });
63  };
64 
65  return (
66    <button
67      aria-label={iconMode === "down" ? "Scroll to bottom" : "Scroll to top"}
68      onClick={handleClick}
69      className={cn("fixed right-6 bottom-6 z-50 rounded-full", className)}
70    >
71      <div
72        style={{ width: size, height: size }}
73        className="relative rounded-full bg-neutral-900 text-white shadow-lg shadow-black/30"
74      >
75        <svg
76          width={size}
77          height={size}
78          viewBox={`0 0 ${size} ${size}`}
79          className="absolute inset-0"
80        >
81          <circle
82            cx={cx}
83            cy={cy}
84            r={r}
85            fill="transparent"
86            strokeWidth={4}
87            className="stroke-white/20"
88          />
89 
90          <motion.circle
91            cx={cx}
92            cy={cy}
93            r={r}
94            fill="transparent"
95            strokeWidth={4}
96            stroke="currentColor"
97            strokeLinecap="round"
98            strokeDasharray={circumference}
99            strokeDashoffset={dashoffset}
100// … truncated