Skip to content

Commit d583028

Browse files
authored
Back to top button (#1412)
* Back to top button Signed-off-by: TuvalSimha <tuval.simha@gmail.com> * prettier Signed-off-by: TuvalSimha <tuval.simha@gmail.com> --------- Signed-off-by: TuvalSimha <tuval.simha@gmail.com>
1 parent 4f36ba2 commit d583028

File tree

2 files changed

+67
-0
lines changed

2 files changed

+67
-0
lines changed

src/components/BackToTop/index.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useEffect, useState } from "react"
2+
3+
interface Props {
4+
scrollThreshold: number
5+
}
6+
7+
const BackToTop: React.FC<Props> = ({ scrollThreshold }) => {
8+
const [isVisible, setIsVisible] = useState(false)
9+
10+
useEffect(() => {
11+
const handleScroll = () => {
12+
const pageHeight = document.body.scrollHeight
13+
const currentPosition = window.pageYOffset
14+
console.log(pageHeight, currentPosition)
15+
if (pageHeight < 6000) {
16+
setIsVisible(false)
17+
} else {
18+
if (currentPosition > scrollThreshold) {
19+
setIsVisible(true)
20+
} else {
21+
setIsVisible(false)
22+
}
23+
}
24+
}
25+
window.addEventListener("scroll", handleScroll)
26+
return () => {
27+
window.removeEventListener("scroll", handleScroll)
28+
}
29+
}, [scrollThreshold])
30+
31+
const handleBackToTopClick = () => {
32+
window.scrollTo({
33+
top: 0,
34+
behavior: "smooth",
35+
})
36+
}
37+
38+
return (
39+
<>
40+
{isVisible && (
41+
<button
42+
className={`bg-[#fb86cd] fixed bottom-10 right-5 cursor-pointer no-underline font-bold inline-flex text-center w-[fit-content] border-0 py-2 px-6 no-underline hover:no-underline focus:outline-none hover:drop-shadow-md hover:[transform:scale(1.05)] rounded text-sm sm:text-base whitespace-nowrap `}
43+
onClick={handleBackToTopClick}
44+
>
45+
<svg
46+
width="15"
47+
height="15"
48+
viewBox="0 0 15 15"
49+
fill="none"
50+
xmlns="http://www.w3.org/2000/svg"
51+
>
52+
<path
53+
d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
54+
fill="currentColor"
55+
fill-rule="evenodd"
56+
clip-rule="evenodd"
57+
></path>
58+
</svg>
59+
</button>
60+
)}
61+
</>
62+
)
63+
}
64+
65+
export default BackToTop

src/components/Layout/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Header from "../Header"
44

55
import "../../assets/css/style.less"
66
import "../../assets/css/global.css"
7+
import BackToTop from "../BackToTop"
78
interface Props {
89
children: React.ReactNode
910
className?: string
@@ -20,6 +21,7 @@ const IndexLayout = ({
2021
{children}
2122
<Footer sourcePath={sourcePath} />
2223
</div>
24+
<BackToTop scrollThreshold={1000} />
2325
</>
2426
)
2527

0 commit comments

Comments
 (0)