"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface ScrollToTopProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  threshold?: number;
  placement?: "fixed" | "inline";
}

export function ScrollToTop({
  threshold = 300,
  placement = "fixed",
  className,
  ...props
}: ScrollToTopProps) {
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const handleScroll = () => {
      setVisible(window.scrollY > threshold);
    };

    handleScroll();
    window.addEventListener("scroll", handleScroll, { passive: true });
    return () => window.removeEventListener("scroll", handleScroll);
  }, [threshold]);

  const placementClasses =
    placement === "fixed" ? "fixed bottom-6 right-6" : "absolute bottom-4 right-4";

  return (
    <button
      type="button"
      onClick={() =>
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        })
      }
      className={cn(
        "z-50 rounded-full border border-border bg-card p-3 text-foreground shadow-lg",
        "transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border",
        placementClasses,
        visible
          ? "translate-y-0 opacity-100"
          : "pointer-events-none translate-y-3 opacity-0",
        className
      )}
      aria-hidden={!visible}
      aria-label="Scroll to top"
      {...props}
    >
      <ArrowUpIcon className="h-5 w-5" />
    </button>
  );
}

function ArrowUpIcon({ className }: { className?: string }) {
  return (
    <svg
      className={className}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
    >
      <path
        d="M10 4L5 9"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M10 4L15 9"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M10 4V16"
        stroke="currentColor"
        strokeWidth="1.6"
        strokeLinecap="round"
      />
    </svg>
  );
}
Scroll To Top

Dependencies

Files

Installation
