File tree Expand file tree Collapse file tree 2 files changed +67
-0
lines changed Expand file tree Collapse file tree 2 files changed +67
-0
lines changed Original file line number Diff line number Diff line change
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
Original file line number Diff line number Diff line change @@ -4,6 +4,7 @@ import Header from "../Header"
4
4
5
5
import "../../assets/css/style.less"
6
6
import "../../assets/css/global.css"
7
+ import BackToTop from "../BackToTop"
7
8
interface Props {
8
9
children : React . ReactNode
9
10
className ?: string
@@ -20,6 +21,7 @@ const IndexLayout = ({
20
21
{ children }
21
22
< Footer sourcePath = { sourcePath } />
22
23
</ div >
24
+ < BackToTop scrollThreshold = { 1000 } />
23
25
</ >
24
26
)
25
27
You can’t perform that action at this time.
0 commit comments