Add scroll to top button

podkrepi-bg · Jul 22, 2024 · 03a5a14 · 03a5a14
1 parent 20de1ce
commit 03a5a14
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/components/client/faq/FaqPage.tsx b/src/components/client/faq/FaqPage.tsx
@@ -6,7 +6,6 @@ import React, { useMemo, useState } from 'react'
 import Layout from 'components/client/layout/Layout'
 
 import ContactUs from './ContactUs'
-import ScrollToTop from './ScrollToTop'
 import VerticalTabs from './VerticalTabs'
 import ExpandableListItem from './ExpandableListItem'
 import {
@@ -81,7 +80,6 @@ export default function FaqPage({ section }: Props) {
         </Stack>
       </TabContext>
       <ContactUs />
-      <ScrollToTop />
     </Layout>
   )
 }
diff --git a/src/components/client/layout/Layout.tsx b/src/components/client/layout/Layout.tsx
@@ -11,6 +11,7 @@ import DetailsModal from 'components/admin/modal/DetailsModal'
 
 import AppNavBar from './AppNavBar'
 import MobileNav from './nav/MobileNav/MobileNav'
+import ScrollToTop from './ScrollToTop'
 
 const createPageTitle = (suffix: string, title?: string) => {
   if (title) {
@@ -135,6 +136,7 @@ export default function Layout({
         <DetailsModal />
       </Container>
       {!hideFooter && <Footer />}
+      <ScrollToTop />
     </Container>
   )
 }
diff --git a/src/components/client/faq/ScrollToTop.tsx → src/components/client/layout/ScrollToTop.tsx b/src/components/client/faq/ScrollToTop.tsx → src/components/client/layout/ScrollToTop.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+
 import { ArrowCircleUp } from '@mui/icons-material'
 import { Box } from '@mui/material'
 
@@ -8,7 +9,7 @@ const ScrollToTop = () => {
   const [isVisible, setIsVisible] = useState(false)
 
   const toggleVisibility = () => {
-    if (window.pageYOffset > 300) {
+    if (window.pageYOffset > 700) {
       setIsVisible(true)
     } else {
       setIsVisible(false)
@@ -31,10 +32,19 @@ const ScrollToTop = () => {
     <div>
       {isVisible && (
         <Box
-          sx={{ position: 'fixed', cursor: 'pointer', right: '6rem', bottom: '0.6rem' }}
+          sx={{
+            position: 'fixed',
+            cursor: 'pointer',
+            right: theme.spacing(3),
+            bottom: theme.spacing(2),
+          }}
           onClick={scrollToTop}>
           <ArrowCircleUp
-            sx={{ width: '65px', height: '65px', color: theme.palette.primary.main }}
+            sx={{
+              width: theme.spacing(8),
+              height: theme.spacing(8),
+              color: theme.palette.primary.main,
+            }}
           />
         </Box>
       )}