-
Notifications
You must be signed in to change notification settings - Fork 56
/
ScrollToTopButton.jsx
57 lines (47 loc) · 1.21 KB
/
ScrollToTopButton.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import { FaArrowUp } from "react-icons/fa";
const GoToTop = () => {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const handleScroll = () => {
const currentScrollY = window.scrollY;
setIsVisible(currentScrollY > 200); // Change 200 to your desired scroll distance
};
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
const goToTop = () => {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
};
return (
<>
{isVisible && (
<Wrapper onClick={goToTop}>
<FaArrowUp className="top-btn--icon" />
</Wrapper>
)}
</>
);
};
const Wrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 95px;
right: 20px;
color: white;
background-color: rgb(22 163 74);
width: 55px;
height: 55px;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
&:hover {
background-color: #58D68D ;
}
`;
export default GoToTop;