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

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

* fix(landing-nav): hoist popstate flag to module scope and skip on hash anchors

* fix(landing-nav): use popstate timestamp window so flag self-expires

* fix(landing-nav): use -Infinity sentinel and consume popstate timestamp on use

* fix(landing-nav): skip scroll on initial mount so reload restoration wins

* fix(landing-nav): gate initial-mount skip on document.readyState

* refactor(landing-nav): simplify scroll-to-top to conventional pattern

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,22 @@
+'use client'
+
+import { useEffect } 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).
+ * Skipped when a hash anchor is targeted so the browser's native anchor scroll wins.
+ */
+export function ScrollToTop() {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (window.location.hash) 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) }}