Nuxt•3mo ago

How to keep scroll position when navigating from NuxtLink

any experienced pookie about this? i cant figure it out... browser back button works fine

6 Replies

Hi @Kiki. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To keep the scroll position when navigating with <NuxtLink>, Nuxt's default behavior is to scroll to the top of the page on navigation, but it preserves scroll position when using the browser back button. If you want to prevent Nuxt from scrolling to the top on navigation (for example, to maintain the scroll position when opening a modal or navigating within the same page), you can use the scrollToTop: false option in your page's meta:

<script setup lang="ts">
definePageMeta({
  scrollToTop: false,
})
</script>

<script setup lang="ts">
definePageMeta({
  scrollToTop: false,
})
</script>

This tells Nuxt not to scroll to the top when navigating to this page, so the scroll position will be preserved. This is especially useful for modal or popup navigation patterns where you want the background scroll position to remain unchanged when the modal is opened or closed via navigation. This feature was specifically improved in recent Nuxt releases to address this use case fix(nuxt): respect the scroll behavior set by scrollToTop. If you need more fine-grained control, you can also customize the scroll behavior in your Nuxt configuration, but for most cases, setting scrollToTop: false in your page meta should suffice. If you are experiencing issues with scroll restoration on page reloads (not navigation), you may want to set window.history.scrollRestoration = 'auto' in a client-side hook, as described here:

onMounted(() => {
  if (process.client && window) {
    window.history.scrollRestoration = 'auto';
  }
})

onMounted(() => {
  if (process.client && window) {
    window.history.scrollRestoration = 'auto';
  }
})

How to prevent the scroll from jumping to the top of the web page on Nuxt3 reload Let me know if you need a more specific example for your use case! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@437711709088514058> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KikiOP•3mo ago

that unfortunately didnt work, im still getting to top when navigating back from catch-all page @kapa.ai

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry to hear that setting scrollToTop: false did not resolve your issue when navigating back from a catch-all page. According to the knowledge sources, Nuxt's scroll behavior can be customized, and the scrollToTop: false meta should prevent scrolling to the top when navigating within the same page component or between certain routes. This was specifically addressed in a recent Nuxt PR, which fixed issues where scroll position was not preserved as expected when using this option fix(nuxt): respect the scroll behavior set by scrollToTop. However, there are known edge cases and ongoing improvements related to scroll restoration, especially with transitions, page layouts, and catch-all routes. Some issues have been reported where scroll position is not correctly restored when navigating between pages with and without transitions, or when using catch-all routes. These issues are being actively worked on by the Nuxt team, as seen in several related PRs and issues ScrollToTop does not work when navigating between pages with and without pageTransition, fix(nuxt): allow scroll to top after layout and page transitions. If the default options and scrollToTop: false are not working for your specific catch-all route scenario, it may be due to one of these unresolved or edge-case issues in Nuxt's scroll behavior. The knowledge sources do not provide a guaranteed workaround for this exact situation. If you need a temporary workaround, you might consider manually managing scroll position using the Composition API and browser APIs, but this is not explicitly documented in the provided sources. In summary:
- The intended way to prevent scrolling to the top is definePageMeta({ scrollToTop: false }), but it may not work in all cases, especially with catch-all routes or certain transitions. - This is a known area of ongoing improvement in Nuxt, and you may be encountering a current limitation or bug. - The knowledge sources do not contain a definitive solution for your exact scenario with catch-all routes. If you need more control, you may need to monitor Nuxt's GitHub issues and PRs for updates or consider a manual workaround until a fix is released. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@437711709088514058> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

KikiOP•3mo ago

anyone?

Gaming

Programming

How to keep scroll position when navigating from NuxtLink

Did you find this page helpful?