dev-chiefworks
48 lines
1.1 KiB
React
48 lines
1.1 KiB
React
'use client'
|
|
|
|
import Image from "next/image";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
export default function ScrollToTop() {
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
|
|
// Top: 0 takes us all the way back to the top of the page
|
|
// Behavior: smooth keeps it smooth!
|
|
const scrollToTop = () => {
|
|
if (typeof window !== "undefined") {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Button is displayed after scrolling for 500 pixels
|
|
const toggleVisibility = () => {
|
|
if (window.pageYOffset > 500) {
|
|
setIsVisible(true);
|
|
} else {
|
|
setIsVisible(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener("scroll", toggleVisibility);
|
|
|
|
return () => window.removeEventListener("scroll", toggleVisibility);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{isVisible && (
|
|
<div>
|
|
<button className="scroll-top " onClick={scrollToTop}>
|
|
<Image width={17} height={17} src="/images/icon/chevron-w.png" alt="icon" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|