\n`\nMake pages taller than screen height\nChange page using nuxt link\n\n### Describe the bug\n\n[Reproduction / Stackblitz](https://stackblitz.com/edit/nuxt-starter-h8che3l8?file=pages%2Findex.vue,pages%2Fd.vue,pages%2Fc.vue,pages%2Fb.vue,pages%2Fa.vue,app.vue,nuxt.config.ts)\n\nPage scroll to top before page transition is triggered making the page jump before shifting.\n\nThis issue only occurs when using the NuxtPage transition props alone without setting \n`app:{pageTransition: true,}` in nuxt config\n\nhttps://github.com/user-attachments/assets/6ba83d07-f5e2-48c2-b0cf-fcc458ed567e\n\n### Additional context\n\n\n### **Nuxt Config (`nuxt.config.ts`)**\n```ts\n// https://nuxt.com/docs/api/configuration/nuxt-config\nexport default defineNuxtConfig({\n devtools: { enabled: false },\n compatibilityDate: '2025-04-02',\n app: {\n // pageTransition: true,\n },\n});\n```\n\n\n\n### **App (`app.vue`)**\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003CNuxtPage\n :transition=\"{\n name: 'page-fade',\n mode: 'out-in',\n }\"\n />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle>\n/* FADE */\n.page-fade-enter-active,\n.page-fade-leave-active {\n transition: opacity 0.45s ease-in-out;\n}\n\n.page-fade-enter-from,\n.page-fade-leave-to {\n opacity: 0;\n}\n\u003C/style>\n```",[1984],{"name":1985,"color":1986},"pending triage","E99695",31650,"nuxt","open","Page scroll to top before transition has started using NuxtPage transition","2025-04-03T06:42:39Z","https://github.com/nuxt/nuxt/issues/31650",0.6659471,{"description":1995,"labels":1996,"number":1998,"owner":1988,"repository":1988,"state":1989,"title":1999,"updated_at":2000,"url":2001,"score":2002},"### Environment\n\nNuxt 3\n\n### Reproduction\n\n**Repository**: https://github.com/JovanaMatic/nuxt-scroll-issue.git\r\n\r\n**package.json:** \r\n```\r\n{\r\n \"name\": \"nuxt-app\",\r\n \"private\": true,\r\n \"type\": \"module\",\r\n \"scripts\": {\r\n \"build\": \"nuxt build\",\r\n \"dev\": \"nuxt dev\",\r\n \"generate\": \"nuxt generate\",\r\n \"preview\": \"nuxt preview\",\r\n \"postinstall\": \"nuxt prepare\"\r\n },\r\n \"dependencies\": {\r\n \"nuxt\": \"^3.12.4\",\r\n \"vue\": \"latest\"\r\n }\r\n}\r\n```\r\n**nuxt.config.js**\r\n\r\n```\r\nexport default defineNuxtConfig({\r\n compatibilityDate: '2024-04-03',\r\n devtools: { enabled: true },\r\n css: [\r\n '~/assets/global.css'\r\n ]\r\n})\r\n```\n\n### Describe the bug\n\nReporting the same issue in Nuxt 3.\r\n\r\nIn our project we have footer element with various NuxtLinks that lead to different pages when clicking on them. When navigating through the links inside footer we experience the scrolling issue. This issue is more visible on Firefox however it is also reproducible on Chrome and Safari browser. When navigating through routes Firefox is forcefully scrolling to the bottom of the page instead of the top of the page.\r\nWe noticed that when removing scroll-behavior: smooth; property from html global class, this behaviour will slightly disappear however it can still be reproduced, user can still, by clicking on links after some time, be scrolled to the bottom of the page which is not expected. When navigating to new page, user should be scrolled to the bottom of that page.\r\n\r\nBrowser versions:\r\nChrome: 126.0.6478.127\r\nFirefox: Version 127.0.2\r\nSafari: 17.5\r\n\r\nNode version: v20.12.2\r\nNuxt version: 3.12.4\n\n### Additional context\n\n**Steps to reproduce:**\r\n\r\n1. open the index page (eg. http://localhost:3000/) in Firefox\r\n\r\n2. scroll to the bottom of the index page\r\n\r\n3. click the navigation button (pointing to for example lease-end or loan-end)\r\n\r\n4. on the new route, the page does not scroll to the top as expected\n\n### Logs\n\n_No response_",[1997],{"name":1985,"color":1986},28227,"Not scrolling to top on navigation (Firefox, scroll-behavior: smooth)","2024-08-13T12:04:46Z","https://github.com/nuxt/nuxt/issues/28227",0.6934722,{"labels":2004,"number":2009,"owner":1988,"repository":1988,"state":2010,"title":2011,"updated_at":2012,"url":2013,"score":2014},[2005,2006],{"name":1985,"color":1986},{"name":2007,"color":2008},"2.x","d4c5f9",5362,"closed","Page flickers/jumps to top before navigating to new page","2023-01-22T15:33:04Z","https://github.com/nuxt/nuxt/issues/5362",0.670317,{"description":2016,"labels":2017,"number":2033,"owner":1988,"repository":1988,"state":2010,"title":2034,"updated_at":2035,"url":2036,"score":2037},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v16.15.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@8.5.5\r\n- Builder: vite\r\n- User Config: app, components, devtools, modules, swiper, css, vite\r\n- Runtime Modules: @pinia/nuxt@0.4.11, nuxt-swiper@1.2.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nYou can check the effect here:\r\nhttps://stackblitz.com/edit/nuxt-starter-cgquz4?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nI have a problem with scroll behavior in Nuxt.js 3. When I refresh the page (when static content is served), the scroll jumps abruptly to the top of the page. However, after serving the static content, there is an automatic scroll to the previous position (the position from which the refresh was triggered), which creates an unpleasant \"jumping\" effect on the website.\r\nIf I use SSR = False, the scroll doesnt \"jump\" and stay on the same position when the page is refreshed.\r\n\r\nI assume that Nuxt3 should prevent the scroll from returning to the top of the document when refreshing my page and keep the scroll at the same position.\r\n\r\nWhen I try to do the same in Nuxt2, the scroll behaviour is normal.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2018,2021,2024,2027,2030],{"name":2019,"color":2020},"good first issue","fbca04",{"name":2022,"color":2023},"3.x","29bc7f",{"name":2025,"color":2026},"workaround available","11376d",{"name":2028,"color":2029},"bug","d73a4a",{"name":2031,"color":2032},"🔨 p3-minor","FBCA04",22487,"Scroll do weird jumping to the top of the web page on Nuxt3 page refresh","2024-01-29T13:56:25Z","https://github.com/nuxt/nuxt/issues/22487",0.67643994,{"description":2039,"labels":2040,"number":2043,"owner":1988,"repository":1988,"state":2010,"title":2044,"updated_at":2045,"url":2046,"score":2047},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.10.0\n- Nuxt Version: 3.13.1\n- CLI Version: 3.13.1\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: app, compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\nAffects every single version of Nuxt 3 – this has never worked. In Nuxt 2 it was perfect. \n\n### Reproduction\n\nhttps://github.com/simonhrogers/transition-no-worky\n\n### Describe the bug\n\nLayout transitions are not retaining correct scroll position. Page transitions do. \n\nNavigate from the about page to the home page here, the home page is already partially scrolled:\n\nhttps://layout-transition-no-worky-nuxt3.netlify.app/about\n\nI can provide further demonstration if needed. Written explanation below, as well as written explanation of the behaviour I would expect, which occurs correctly without layout transitions. \n\nI open my website. I scroll down 200px. I click a NuxtLink. The browser navigates to the new page. The new page is already scrolled 200px from the top. I scroll up 52px. I click on Chrome’s back button. It takes me back to the index page, which is scrolled down 148px.\n\nThis is not the default behaviour of the website, which operates correctly without layout transitions. But it is happening between layout transitions.\n\nHow can I make the default behaviour occur? The desired behaviour is as follows:\n\nI open my website. I scroll down 200px. I click a NuxtLink. The browser navigates to the new page. The new page is at the top – scroll distance: 0px. I scroll down 250px. I click on Chrome’s back button. It takes me back to the index page, which is scrolled down 200px, exactly where I left it.\n\nThank you!\n\n### Additional context\n\nI’m wondering if the issue might stem from [`nuxt/src/pages/runtime/router.options.ts`](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/pages/runtime/router.options.ts), which checks for `route.meta.pageTransition`, but not `route.meta.layoutTransition` inside the `hasTransition` function? This appears to be the deciding factor in whether the page is scrolled to top or not, so would make total sense at first glance. But I’m just getting to grips with the codebase, and I fear it can’t be this easy? \n\nIf that’s not the solution, more below:\n\nDirectly below, `hookToWait` appears to await the resolution of both `page:transition:finish` and `page:finish`, but Nuxt lacks a corresponding `layout:transition:finish` hook to call. As far as I can see, `page:transition:finish` is not called in relation to layout transitions.\n\nIn [`nuxt/src/pages/runtime/page.ts`](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/pages/runtime/page.ts), we see a repetition of `hasTransition` which again, only checks for page transitions. If a page transition is present, `page:transition:finish` is called `onAfterLeave`:\n\n```js\nconst hasTransition = !!(props.transition ?? routeProps.route.meta.pageTransition ?? defaultPageTransition)\nconst transitionProps = hasTransition && _mergeTransitionProps([\n props.transition,\n routeProps.route.meta.pageTransition,\n defaultPageTransition,\n { onAfterLeave: () => { nuxtApp.callHook('page:transition:finish', routeProps.Component) } },\n].filter(Boolean))\n```\n\nAnd finally, [`nuxt/src/app/components/nuxt-layout.ts`](https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/components/nuxt-layout.ts) appears to be the only location where `route.meta.layoutTransition` is mentioned, providing the layout prop `hasTransition`.\n\n### Logs\n\n_No response_",[2041,2042],{"name":2028,"color":2029},{"name":2031,"color":2032},28988,"Layout Transitions break scroll position on route change and browser forward/back","2025-04-02T08:44:50Z","https://github.com/nuxt/nuxt/issues/28988",0.6773744,{"description":2049,"labels":2050,"number":2053,"owner":1988,"repository":1988,"state":2010,"title":2054,"updated_at":2055,"url":2056,"score":2057},"### Environment\r\n\r\n System:\r\n OS: macOS 13.2.1\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 69.81 MB / 32.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node\r\n Yarn: 1.22.19 - ~/www/showbizz/frontend/node_modules/.bin/yarn\r\n npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm\r\n Browsers:\r\n Chrome: 111.0.5563.64\r\n Chrome Canary: 113.0.5665.2\r\n Firefox: 110.0.1\r\n Safari: 16.3\r\n Safari Technology Preview: 16.4\r\n npmPackages:\r\n nuxt: ^2.15.8 => 2.16.3\r\n\r\n### Reproduction\r\n\r\nComing\r\n\r\n### Describe the bug\r\n\r\nA) When navigating between sibblings nested pages, Nuxt should not scrollToTop. This is currently the correct behavior. ✅ \r\n\r\n\r\nB) When I navigate between a regular page to a nested page, Nuxt should scrollToTop.\r\nCurrently incorrect, nuxt doesn't scrollToTop. 🛑 \r\n\r\n\r\nC) If I add `scrollToTop: true`, then it break behavior A because it will scrollToTop even when navigating between nested pages which are Tabs in my case. 🛑 \r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\nThis is probably related to `scrollBehavior`, because the `some` will now always return true even if I added `scrollToTop` to the parent page only and non of the children pages.\r\n```\r\nfunction shouldScrollToTop(route) {\r\n const Pages = getMatchedComponents(route);\r\n console.log(Pages);\r\n if (Pages.length === 1) {\r\n const { options = {} } = Pages[0];\r\n return options.scrollToTop !== false;\r\n }\r\n return Pages.some(({ options }) => options && options.scrollToTop);\r\n}\r\n```\r\n\r\n### Logs\r\n\r\n_No response_",[2051,2052],{"name":1985,"color":1986},{"name":2007,"color":2008},19848,"scrollBehavior does not scrollToTop between regular and nested page","2024-07-21T10:21:22Z","https://github.com/nuxt/nuxt/issues/19848",0.67876184,{"description":2059,"labels":2060,"number":2062,"owner":1988,"repository":1988,"state":2010,"title":2063,"updated_at":2064,"url":2065,"score":2066},"Hi. Somebody notice a little annoying glitch in Firefox (I am using Ubuntu, not sure if it's related to OS) - when page transition is triggered, page footer jumps to top of the screen for 1ms (very quickly but unfortunately noticible). What can cause that behavior? In Chrome all just fine. \n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c865\">#c865\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2061],{"name":2007,"color":2008},1002,"What cause a glitch when page transition in Firefox?","2023-01-18T15:40:38Z","https://github.com/nuxt/nuxt/issues/1002",0.6798597,{"description":2068,"labels":2069,"number":2072,"owner":1988,"repository":1988,"state":2010,"title":2073,"updated_at":2074,"url":2075,"score":2076},"Certain pages that were (correctly) jumping to the top of the page after the route changed in 1.1.2 have stopped doing so in the latest release.\r\n\r\n### Steps to reproduce\r\n1. scroll down this page: http://next.btmat.org.uk/2012\r\n2. click on an article excerpt link\r\n3. see the article render half way down the page\r\n\r\n[Here's the repo](https://github.com/davidpmccormick/btmat-nuxt)\r\n\r\nBoth the [`from` page](https://github.com/davidpmccormick/btmat-nuxt/blob/master/pages/_year.vue) and the [`to` page](https://github.com/davidpmccormick/btmat-nuxt/blob/master/pages/_year/_month/_pageSlug.vue) include `scrollToTop: true`.\r\n\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2378\">#c2378\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2070,2071],{"name":1985,"color":1986},{"name":2007,"color":2008},2738,"Inconsistent scrollToTop behaviour after update to 1.3.0","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/2738",0.6809892,{"description":2078,"labels":2079,"number":2084,"owner":1988,"repository":1988,"state":2010,"title":2085,"updated_at":2086,"url":2087,"score":2088},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v21.6.1`\r\n- Nuxt Version: `3.10.3`\r\n- CLI Version: `3.10.1`\r\n- Nitro Version: `2.8.1`\r\n- Package Manager: `npm@10.2.4`\r\n- Builder: `-`\r\n- User Config: `nitro`, `modules`, `svgo`, `image`, `googleFonts`, `alias`, `app`, `typescript`, `devtools`, `devServer`\r\n- Runtime Modules: `@pinia/nuxt@0.5.1`, `@nuxt/content@2.12.0`, `@nuxtjs/tailwindcss@6.11.4`, `@nuxtjs/google-fonts@3.1.3`, `nuxt-svgo@4.0.0`, `@vueuse/nuxt@10.9.0`, `@nuxt/image@1.3.0`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-eedaaw\r\n\r\n### Describe the bug\r\n\r\nWhen transitioning between pages the scroll position is reset which is expected. However when passing the transition via the prop to \u003CNuxtPage> this reset takes places before the page is actually changed. Also the visibility 'glitches' in before changing the page.\r\n\r\nAlthough I am quite inexperienced I believe this could be related to https://github.com/nuxt/nuxt/issues/2593\r\n\r\nA workaround for me was to pass the transition in the nuxt config instead. To be able to use js hooks I declared them in the prop without specifying a transition name or type:\r\n```\r\n\u003CNuxtPage :transition=\"{onAfterEnter: () => {console.log('onAfterEnter')},}\"/>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2080,2081],{"name":1985,"color":1986},{"name":2082,"color":2083},"pages","00DFB5",26034,"scroll jump & visibility issue with page transitions","2025-04-02T08:45:05Z","https://github.com/nuxt/nuxt/issues/26034",0.6888755,{"description":2090,"labels":2091,"number":2094,"owner":1988,"repository":1988,"state":2010,"title":2095,"updated_at":2096,"url":2097,"score":2098},"### Version\n\n[v2.1.0](https://github.com/nuxt.js/releases/tag/v2.1.0)\n\n### Reproduction link\n\n[https://codesandbox.io/s/o90qv0xl16](https://codesandbox.io/s/o90qv0xl16)\n\n### Steps to reproduce\n\n1. Go to repo link. \n2. Scroll all the way down and click on link. \n3. Notice you are on a new page but at the bottom of the page\n\n### What is expected ?\n\nShould be at the top of the page\n\n### What is actually happening?\n\nYou are at the bottom of the page\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This bug report is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7941\">#c7941\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2092,2093],{"name":1985,"color":1986},{"name":2007,"color":2008},4080,"page does not scrollToTop on route change if the layout is also changing","2023-01-22T15:30:07Z","https://github.com/nuxt/nuxt/issues/4080",0.69201195,["Reactive",2100],{},["Set"],["ShallowReactive",2103],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"7aY1S9wSXLbKILVLTa-B1NgqdOFhIGmn4Re6zi_UnKg":-1},"/nuxt/nuxt/2593"]