Добавил кнопку подъема наверх страницы

app/routes/home.tsx

@@ -14,6 +14,7 @@ import {ResponseError} from "~/classes/responseError";
 import ItemList from "~/components/itemList";
 import ItemDialog from "~/components/itemDialog";
 import OutlinedFlagIcon from '@mui/icons-material/OutlinedFlag';
+import NorthOutlinedIcon from '@mui/icons-material/NorthOutlined';
 import ReportDialog from "~/components/reportDialog";
 import LoopIcon from '@mui/icons-material/Loop';
 import ClearIcon from '@mui/icons-material/Clear';
@@ -28,6 +29,8 @@ export default function Home() {
     const [showDialog, setShowDialog] = useState(false);
     const [currentDialogBlacklistItem, setCurrentDialogBlacklistItem] = useState<BlacklistItem|null>(null);
     const [fabIsHovered, setFabIsHovered] = useState(false);
+    const [fabGetUpIsHovered, setFabGetUpIsHovered] = useState(false);
+    const [getUpFabIsVisible, setGetUpFabIsVisible] = useState(false);
     const [showReportDialog, setReportShowDialog] = useState(false);
     const [triggerUpdate, setTriggerUpdate] = useState(0);
     const [showEraseButton, setShowEraseButton] = useState(false);
@@ -66,6 +69,13 @@ export default function Home() {
         }
     }, [searchText]);
 
+    useEffect(() => {
+        window.addEventListener('scroll', toggleVisibility);
+        return () => {
+            window.removeEventListener('scroll', toggleVisibility);
+        };
+    }, []);
+
     function handleSearch(text: string) {
         setSearchText(text);
     }
@@ -96,6 +106,21 @@ export default function Home() {
         setSearchText("");
     };
 
+    const toggleVisibility = () => {
+        if (window.pageYOffset > 70) {
+            setGetUpFabIsVisible(true);
+        } else {
+            setGetUpFabIsVisible(false);
+        }
+    };
+
+    const scrollToTop = () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth', // Плавная прокрутка
+        });
+    };
+
     const search = (searchString: string) => {
         searchString = searchString.toLowerCase();
         return totalBlacklistItems.filter((item) => {
@@ -161,6 +186,23 @@ export default function Home() {
                 <ItemList isFetching={isFetchingList} blacklistItems={blacklistItems} showDialog={handleItemClick}></ItemList>
                 <ItemDialog blacklistItem={currentDialogBlacklistItem} open={showDialog} handleClose={handleDialogClose}></ItemDialog>
                 <ReportDialog open={showReportDialog} handleClose={handleReportDialogClose}/>
+                <Fab
+                    onClick={() => scrollToTop()}
+                    onMouseEnter={() => setFabGetUpIsHovered(true)}
+                    onMouseLeave={() => setFabGetUpIsHovered(false)}
+                    variant='circular'
+                    sx={{
+                        position: 'fixed',
+                        bottom: 85,
+                        right: 16,
+                        zIndex: 1000,
+                        width: '56px',
+                        overflow: 'hidden',
+                        display: getUpFabIsVisible ? 'block' : 'none',
+                    }}
+                >
+                    <NorthOutlinedIcon />
+                </Fab>
                 <Fab
                     onClick={() => handleReportDialogOpen()}
                     onMouseEnter={() => setFabIsHovered(true)}