fix(landing-nav): scroll to top on route change in shared shells

Author: waleedlatif1

apps/sim/app/(landing)/blog/layout.tsx

@@ -2,6 +2,7 @@ import { getNavBlogPosts } from '@/lib/blog/registry'
 import { SITE_URL } from '@/lib/core/utils/urls'
 import Footer from '@/app/(landing)/components/footer/footer'
 import Navbar from '@/app/(landing)/components/navbar/navbar'
+import { ScrollToTop } from '@/app/(landing)/components/scroll-to-top'
 
 export default async function StudioLayout({ children }: { children: React.ReactNode }) {
   const blogPosts = await getNavBlogPosts()
@@ -29,6 +30,7 @@ export default async function StudioLayout({ children }: { children: React.React
 
   return (
     <div className='flex min-h-screen flex-col bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
+      <ScrollToTop />
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}

apps/sim/app/(landing)/components/scroll-to-top.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { usePathname } from 'next/navigation'
+
+/**
+ * Resets window scroll to the top on App Router pathname changes.
+ *
+ * Next.js's default scroll handling only brings the new Page element into view,
+ * which often resolves to "no scroll" inside shared layouts (see vercel/next.js#64435).
+ * Popstate-driven navigations are skipped so browser back/forward scroll restoration
+ * is preserved.
+ */
+export function ScrollToTop() {
+  const pathname = usePathname()
+  const isPopNavigationRef = useRef(false)
+
+  useEffect(() => {
+    const onPop = () => {
+      isPopNavigationRef.current = true
+    }
+    window.addEventListener('popstate', onPop)
+    return () => window.removeEventListener('popstate', onPop)
+  }, [])
+
+  useEffect(() => {
+    if (isPopNavigationRef.current) {
+      isPopNavigationRef.current = false
+      return
+    }
+    window.scrollTo(0, 0)
+  }, [pathname])
+
+  return null
+}

apps/sim/app/(landing)/integrations/(shell)/layout.tsx

@@ -2,6 +2,7 @@ import { getNavBlogPosts } from '@/lib/blog/registry'
 import { SITE_URL } from '@/lib/core/utils/urls'
 import Footer from '@/app/(landing)/components/footer/footer'
 import Navbar from '@/app/(landing)/components/navbar/navbar'
+import { ScrollToTop } from '@/app/(landing)/components/scroll-to-top'
 
 export default async function IntegrationsLayout({ children }: { children: React.ReactNode }) {
   const blogPosts = await getNavBlogPosts()
@@ -29,6 +30,7 @@ export default async function IntegrationsLayout({ children }: { children: React
 
   return (
     <div className='dark flex min-h-screen flex-col bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
+      <ScrollToTop />
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}

apps/sim/app/(landing)/models/(shell)/layout.tsx

@@ -2,6 +2,7 @@ import { getNavBlogPosts } from '@/lib/blog/registry'
 import { SITE_URL } from '@/lib/core/utils/urls'
 import Footer from '@/app/(landing)/components/footer/footer'
 import Navbar from '@/app/(landing)/components/navbar/navbar'
+import { ScrollToTop } from '@/app/(landing)/components/scroll-to-top'
 
 export default async function ModelsLayout({ children }: { children: React.ReactNode }) {
   const blogPosts = await getNavBlogPosts()
@@ -24,6 +25,7 @@ export default async function ModelsLayout({ children }: { children: React.React
 
   return (
     <div className='dark flex min-h-screen flex-col bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
+      <ScrollToTop />
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}