Nuxt•2mo ago

Deactive jump to the top

Hey, so is no longer possible to deactivate jump to the top in nuxt? (apparently this no longer is possible?)

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@nuxtjs/google-fonts',
    'radix-vue'
  ],
  router: {
    scrollBehavior: (to, from, savedPosition) => {

      if (savedPosition) {
        return savedPosition
      }
      
      if (to.hash) {
        return {
          el: to.hash,
          behavior: 'smooth'
        }
      }
      
      return false
    }
  }
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    '@pinia/nuxt',
    '@nuxtjs/tailwindcss',
    '@vueuse/nuxt',
    '@nuxtjs/google-fonts',
    'radix-vue'
  ],
  router: {
    scrollBehavior: (to, from, savedPosition) => {

      if (savedPosition) {
        return savedPosition
      }
      
      if (to.hash) {
        return {
          el: to.hash,
          behavior: 'smooth'
        }
      }
      
      return false
    }
  }
})

3 Replies

kapa.ai•2mo ago

Hi @IsaacR943. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it appears that the ability to deactivate the "jump to top" behavior in Nuxt has changed over time. However, there are still ways to control the scroll behavior in Nuxt 3. Let me explain: 1. The scrollBehavior option in the router configuration you've shown is no longer the recommended way to control scroll behavior in Nuxt 3. 2. Instead, Nuxt 3 provides a scrollToTop option that can be set on individual pages using the definePageMeta compiler macro. This allows you to control the scroll behavior on a per-page basis Docs > Migration > Component Options > middleware (https://nuxt.com/docs/migration/component-options#middleware). Here's an example of how you can use definePageMeta to disable scrolling to top for a specific page:

<script setup>
definePageMeta({
  scrollToTop: false
})
</script>

<script setup>
definePageMeta({
  scrollToTop: false
})
</script>

3. If you want to overwrite the default scroll behavior globally, you can do so by creating a ~/app/router.options.ts file Docs > Api > Utils > definePageMeta > Parameters > meta Part 4 (https://nuxt.com/docs/api/utils/define-page-meta#meta). 4. It's worth noting that there have been several recent improvements and fixes related to scroll behavior in Nuxt: - A fix was implemented to prevent initial scroll jump when loading a page fix(nuxt): prevent initial scroll jump when loading page (https://github.com/nuxt/nuxt/pull/25483). - Another fix was added to allow scroll to top after layout and page transitions fix(nuxt): allow scroll to top after layout and page transitions (https://github.com/nuxt/nuxt/pull/23769). - There was also a fix to ensure scrolling to top by default on dynamic routes fix(nuxt): scroll to top by default on dynamic routes (https://github.com/nuxt/nuxt/pull/22403). 5. If you're using the latest version of Nuxt, these improvements should already be in place, providing better control over scroll behavior. Given these changes, while the exact method you've shown is no longer applicable, you still have options to control the scroll behavior in Nuxt 3. You may need to adjust your approach to use the definePageMeta method for individual pages or create a custom router options file for global control. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

IsaacR943OP•2mo ago

Actually the way to do it is going to each of the pages and pasting on the script set up section:

definePageMeta({
  scrollToTop: false
})

definePageMeta({
  scrollToTop: false
})

Gaming

Programming

Deactive jump to the top