diff --git a/test/basic.test.ts b/test/basic.test.ts
index 03d3df8d30..b045b65106 100644
--- a/test/basic.test.ts
+++ b/test/basic.test.ts
@@ -553,6 +553,48 @@ describe('nuxt links', () => {
 
     await page.close()
   })
+
+  it('expect scroll to top on routes with same component', async () => {
+    // #22402
+    const page = await createPage('/big-page-1')
+    await page.setViewportSize({
+      width: 1000,
+      height: 1000
+    })
+    await page.waitForLoadState('networkidle')
+    await page.locator('#big-page-2').scrollIntoViewIfNeeded()
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+    await page.locator('#big-page-2').click()
+    console.log('HOOOOOOHOHO' + await page.evaluate(() => window.scrollY))
+    await page.waitForURL(url => url.href.includes('/big-page-2'))
+    console.log('HAAAAHAHAHA' + await page.evaluate(() => window.scrollY))
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+    await page.locator('#big-page-1').scrollIntoViewIfNeeded()
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+    await page.locator('#big-page-1').click()
+    await page.waitForURL(url => url.href.includes('/big-page-1'))
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+  })
+
+  it('expect scroll to top on nested pages', async () => {
+    // #20523
+    const page = await createPage('/nested/foo/test')
+    await page.setViewportSize({
+      width: 1000,
+      height: 1000
+    })
+    await page.waitForLoadState('networkidle')
+    await page.locator('#user-test').scrollIntoViewIfNeeded()
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+    await page.locator('#user-test').click()
+    await page.waitForURL(url => url.href.includes('/nested/foo/user-test'))
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+    await page.locator('#test').scrollIntoViewIfNeeded()
+    expect(await page.evaluate(() => window.scrollY)).toBeGreaterThan(0)
+    await page.locator('#test').click()
+    await page.waitForURL(url => url.href.includes('/nested/foo/test'))
+    expect(await page.evaluate(() => window.scrollY)).toBe(0)
+  })
 })
 
 describe('head tags', () => {
diff --git a/test/fixtures/basic/modules/page-extend.ts b/test/fixtures/basic/modules/page-extend/index.ts
similarity index 58%
rename from test/fixtures/basic/modules/page-extend.ts
rename to test/fixtures/basic/modules/page-extend/index.ts
index 1f794eeee6..b3ac74e80b 100644
--- a/test/fixtures/basic/modules/page-extend.ts
+++ b/test/fixtures/basic/modules/page-extend/index.ts
@@ -4,7 +4,7 @@ export default defineNuxtModule({
   meta: {
     name: 'page-extend'
   },
-  setup () {
+  setup() {
     const nuxt = useNuxt()
     const resolver = createResolver(import.meta.url)
 
@@ -12,7 +12,13 @@ export default defineNuxtModule({
       pages.push({
         name: 'page-extend',
         path: '/page-extend',
-        file: resolver.resolve('./runtime/page.vue')
+        file: resolver.resolve('../runtime/page.vue')
+      }, {
+        path: '/big-page-1',
+        file: '@/modules/page-extend/pages/big-page.vue'
+      }, {
+        path: '/big-page-2',
+        file: '@/modules/page-extend/pages/big-page.vue'
       })
     })
   }
diff --git a/test/fixtures/basic/modules/page-extend/pages/big-page.vue b/test/fixtures/basic/modules/page-extend/pages/big-page.vue
new file mode 100644
index 0000000000..9e448d9a55
--- /dev/null
+++ b/test/fixtures/basic/modules/page-extend/pages/big-page.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div class="big-block">
+      big
+    </div>
+    <div class="big-block">
+      page
+    </div>
+    <NuxtLink id="big-page-1" to="/big-page-1">
+      to big page 1
+    </NuxtLink>
+    <NuxtLink id="big-page-2" to="/big-page-2">
+      to big page 2
+    </NuxtLink>
+    <NuxtLink id="big-page-2-test-test" to="/big-page-2?test=test">
+      to big page 2 with ?test=test
+    </NuxtLink>
+    <NuxtLink id="big-page-2-test-super-test" to="/big-page-2?test=super-test">
+      to big page 2 with ?test=super-test
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: false
+})
+</script>
+
+<style scoped>
+.big-block {
+    height: 90vh;
+    width: 100vw;
+    background-color: brown;
+}
+</style>
diff --git a/test/fixtures/basic/pages/index.vue b/test/fixtures/basic/pages/index.vue
index dd817783a6..8ccd4359f3 100644
--- a/test/fixtures/basic/pages/index.vue
+++ b/test/fixtures/basic/pages/index.vue
@@ -49,6 +49,7 @@
     <component :is="`with${'-'.toString()}suffix`" />
     <ClientWrapped ref="clientRef" style="color: red;" class="client-only" />
     <ServerOnlyComponent class="server-only" style="background-color: gray;" />
+    <NuxtLink to="/big-page-1">to big 1</NuxtLink>
   </div>
 </template>
 
diff --git a/test/fixtures/basic/pages/nested/[foo]/index.vue b/test/fixtures/basic/pages/nested/[foo].vue
similarity index 56%
rename from test/fixtures/basic/pages/nested/[foo]/index.vue
rename to test/fixtures/basic/pages/nested/[foo].vue
index beab2f220e..1dce2deb33 100644
--- a/test/fixtures/basic/pages/nested/[foo]/index.vue
+++ b/test/fixtures/basic/pages/nested/[foo].vue
@@ -6,5 +6,16 @@ const route = useRoute('nested-foo')
   <div>
     <div>nested/[foo]/index.vue</div>
     <div>foo: {{ route.params.foo }}</div>
+
+    <div class="big-block" />
+    <div class="big-block" />
+    <NuxtPage />
   </div>
 </template>
+
+<style scoped>
+.big-block {
+  height: 90vh;
+  width: 100vw;
+}
+</style>
\ No newline at end of file
diff --git a/test/fixtures/basic/pages/nested/[foo]/[bar].vue b/test/fixtures/basic/pages/nested/[foo]/[bar].vue
index 168f7737dd..dd6f0b0a5b 100644
--- a/test/fixtures/basic/pages/nested/[foo]/[bar].vue
+++ b/test/fixtures/basic/pages/nested/[foo]/[bar].vue
@@ -7,5 +7,7 @@ const route = useRoute('nested-foo-bar')
     <div>nested/[foo]/[bar].vue</div>
     <div>foo: {{ route.params.foo }}</div>
     <div>bar: {{ route.params.bar }}</div>
+    <NuxtLink to="/nested/foo/user-test" id="user-test">to /nested/foo/user-test</NuxtLink>
+    <NuxtLink to="/nested/foo/test" id="test">to /nested/foo/test</NuxtLink>
   </div>
 </template>
diff --git a/test/fixtures/basic/pages/nested/[foo]/user-[group].vue b/test/fixtures/basic/pages/nested/[foo]/user-[group].vue
index 4a4da9fe55..52d9a7f3b9 100644
--- a/test/fixtures/basic/pages/nested/[foo]/user-[group].vue
+++ b/test/fixtures/basic/pages/nested/[foo]/user-[group].vue
@@ -7,5 +7,8 @@ const route = useRoute('nested-foo-user-group')
     <div>nested/[foo]/user-[group].vue</div>
     <div>foo: {{ route.params.foo }}</div>
     <div>group: {{ route.params.group }}</div>
+    
+    <NuxtLink to="/nested/foo/user-test" id="user-test">to /nested/foo/user-test</NuxtLink>
+    <NuxtLink to="/nested/foo/test" id="test">to /nested/foo/test</NuxtLink>
   </div>
 </template>