91 lines
2.9 KiB
JavaScript
91 lines
2.9 KiB
JavaScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
export default function ScrollTop() {
|
|
useEffect(() => {
|
|
const box = document.querySelector(".scrollTop");
|
|
const liquid = document.querySelector(".liquid");
|
|
const offset = 200;
|
|
|
|
const handleScroll = () => {
|
|
const scrollPosition = window.scrollY;
|
|
const docHeight =
|
|
document.documentElement.scrollHeight - window.innerHeight;
|
|
const percent = Math.min(
|
|
Math.floor((scrollPosition / docHeight) * 100),
|
|
100
|
|
);
|
|
|
|
if (liquid) {
|
|
liquid.style.transform = `translate(0, ${100 - percent}%)`;
|
|
}
|
|
|
|
if (scrollPosition >= offset) {
|
|
box?.classList.add("active-progress");
|
|
} else {
|
|
box?.classList.remove("active-progress");
|
|
}
|
|
};
|
|
|
|
const handleClick = (event) => {
|
|
event.preventDefault();
|
|
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
};
|
|
|
|
window.addEventListener("scroll", handleScroll);
|
|
box?.addEventListener("click", handleClick);
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
box?.removeEventListener("click", handleClick);
|
|
};
|
|
}, []);
|
|
return (
|
|
<div className="scrollTop effect-icon">
|
|
<div className="icon">
|
|
<i className="icon-long-arrow-alt-up-solid" />
|
|
</div>
|
|
<div className="liquid">
|
|
<svg viewBox="0 0 560 20" className="liquid_wave liquid_wave_back">
|
|
<use xlinkHref="#wave" />
|
|
</svg>
|
|
<svg viewBox="0 0 560 20" className="liquid_wave liquid_wave_front">
|
|
<use xlinkHref="#liquid" />
|
|
</svg>
|
|
<svg
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
viewBox="0 0 560 20"
|
|
style={{ display: "none" }}
|
|
>
|
|
<symbol id="liquid">
|
|
<path
|
|
d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"
|
|
fill="#"
|
|
style={{
|
|
transition: "stroke-dashoffset 10ms linear",
|
|
strokeDasharray: "301.839, 301.839",
|
|
strokeDashoffset: "251.895px",
|
|
}}
|
|
/>
|
|
<path
|
|
d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"
|
|
fill="#"
|
|
/>
|
|
<path
|
|
d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"
|
|
fill="#"
|
|
/>
|
|
<path
|
|
d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"
|
|
fill="#"
|
|
/>
|
|
</symbol>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|