scanash.com
this repo has no description
1'use client';
2
3import {useState, useEffect} from 'react';
4import {ArrowUpIcon} from '@heroicons/react/24/solid';
5
6export function BackToTop() {
7 const [isVisible, setIsVisible] = useState(false);
8
9 const toggleVisibility = () => {
10 if (window.scrollY > 300) {
11 setIsVisible(true);
12 } else {
13 setIsVisible(false);
14 }
15 };
16
17 const scrollToTop = () => {
18 window.scrollTo({
19 top: 0,
20 behavior: 'smooth',
21 });
22 };
23
24 useEffect(() => {
25 window.addEventListener('scroll', toggleVisibility);
26 return () => {
27 window.removeEventListener('scroll', toggleVisibility);
28 };
29 }, []);
30
31 if (!isVisible) {
32 return null;
33 }
34
35 return (
36 <div className="sticky top-[85vh] w-full flex justify-end pointer-events-none z-50">
37 <button
38 onClick={scrollToTop}
39 className="pointer-events-auto mr-4 comic-button bg-yellow-400 p-3 rounded-full shadow-lg hover:bg-yellow-300 transition-all transform hover:scale-110"
40 aria-label="Back to top"
41 >
42 <ArrowUpIcon className="w-6 h-6 text-black" />
43 </button>
44 </div>
45 );
46}