Files
CMS-Client/components/_App/ScrollToTop.js
CHIEFSOFT\ameye 5f95d857d4 first commit
2023-10-14 22:02:57 -04:00

41 lines
894 B
JavaScript

import React, { useState, useEffect } from "react";
const ScrollToTop = () => {
const [showScroll, setShowScroll] = useState(false);
useEffect(() => {
window.addEventListener("scroll", checkScrollTop);
return function cleanup() {
window.removeEventListener("scroll", checkScrollTop);
};
});
const checkScrollTop = () => {
if (!showScroll && window.pageYOffset > 100) {
setShowScroll(true);
} else if (showScroll && window.pageYOffset <= 100) {
setShowScroll(false);
}
};
const scrollTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};
return (
<>
<div
className="scroll-to-top"
onClick={scrollTop}
style={{
display: showScroll ? "block" : "none",
}}
>
<i className="ri-arrow-up-line"></i>
</div>
</>
);
};
export default ScrollToTop;