51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
const BackToTop = () => {
|
|
const [active, setActive] = useState(false);
|
|
const [progress, setProgress] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scroll = window.scrollY;
|
|
const height = document.documentElement.scrollHeight - window.innerHeight;
|
|
const progressValue = 307.919 - (scroll * 307.919 / height);
|
|
|
|
setProgress(progressValue);
|
|
|
|
if (scroll > 150) {
|
|
setActive(true);
|
|
} else {
|
|
setActive(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
return () => window.removeEventListener("scroll", handleScroll);
|
|
}, []);
|
|
|
|
const scrollToTop = () => {
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`backtotop-wrap cursor-pointer ${active ? 'active-progress' : ''}`}
|
|
onClick={scrollToTop}
|
|
>
|
|
<svg className="backtotop-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path
|
|
d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
|
|
style={{
|
|
transition: 'stroke-dashoffset 10ms linear',
|
|
strokeDasharray: '307.919, 307.919',
|
|
strokeDashoffset: progress
|
|
}}
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BackToTop;
|