scroll to last y value on page reload

Author: StackOverflowIsBetterThanAnyAI

src/app/page.tsx

@@ -4,9 +4,11 @@ import Feed from '@/components/feed/Feed'
 import Footer from '@/components/footer/Footer'
 import Navigation from '@/components/navigation/Navigation'
 import { useFocusTrap } from '@/hooks/useFocusTrap'
+import { useSetWindowScrollY } from '@/hooks/useSetWindowScrollY'
 
 export default function Home() {
     useFocusTrap()
+    useSetWindowScrollY()
 
     return (
         <div className="min-h-svh flex flex-col items-center justify-start bg-gradient-to-b from-stone-700 to-stone-800">

src/components/feed/Feed.tsx

@@ -14,6 +14,7 @@ import {
 import fetchFeedItems from '@/api/fetchFeedItems'
 import { FeedItemsType } from '@/types/types'
 import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
+import { getWindowScrollY } from '@/utils/getWindowScrollY'
 
 const Feed = () => {
     const PAGE_SIZE = 10
@@ -35,6 +36,8 @@ const Feed = () => {
 
         if (!parsedStorageData?.feedItems?.length) {
             loadMoreItems()
+        } else {
+            getWindowScrollY()
         }
     }, [loadMoreItems])
 

src/hooks/useSetWindowScrollY.ts

@@ -0,0 +1,16 @@
+'use client'
+
+import { useEffect } from 'react'
+import { setItemInSessionStorage } from '@/utils/setItemInSessionStorage'
+
+export const useSetWindowScrollY = () => {
+    useEffect(() => {
+        const onScroll = () => {
+            setItemInSessionStorage('scrollY', window.scrollY)
+        }
+
+        window.addEventListener('scroll', onScroll)
+
+        return () => window.removeEventListener('scroll', onScroll)
+    }, [])
+}

src/utils/getWindowScrollY.ts

@@ -0,0 +1,15 @@
+import { getItemFromSessionStorage } from '@/utils/getItemFromSessionStorage'
+
+export const getWindowScrollY = () => {
+    const parsedStorageData = getItemFromSessionStorage()
+
+    const scrollY = parsedStorageData?.scrollY || 0
+
+    const scrollToPosition = () => {
+        window.scrollTo({ top: scrollY, left: 0, behavior: 'smooth' })
+    }
+
+    requestAnimationFrame(() => {
+        setTimeout(scrollToPosition, 0)
+    })
+}