Problem with nuxt-links navigation to pages with hashes/anchors

Question

I am using nuxt-links in my website navigation, most of them point to hashed elements/anchors in the home page like:

<nuxt-link
  v-else
  class="text-link"
  :to="localePath('index') + #hash"
>

and it does its job if currently on the home page but when I navigate to a different site, eg. /about and I click on a navbar nuxt-link (so I want to navigate from /about to /#hash or /any-other-site#hash) I got a nuxt error displayed to check the console where it reads "Cannot read property 'offsetTop' of null".

My router configuration in nuxt.config (without it I wouldn't be even able to scroll to an anchored element being in the same site as the element!):

  router: {
    scrollBehavior(to) {
      if (to.hash) {
        return window.scrollTo({ top: document.querySelector(to.hash).offsetTop + window.innerHeight, behavior: 'smooth' });
      }
      return window.scrollTo({ top: 0, behavior: 'smooth' });
      }
  },

In the :to attribute I tried 'hash' '#hash', nothing works. Could please anyone help me with this? How do I navigate to a different page + #anchor (so to scroll to that anchor?)

Wichern

If you are using nuxt version 2.4+ then this is how you should set up scroll behaviour, specifically the return Promise part at the bottom. – Loadstone

@Loadstone With the default configuration (the one you mention) when I click on mu nuxt links <nuxt-link to="/#hash"> scrolling to that element never happens. Clicking does not trigger anything. – Wichern

Answer 1

Anyone who had this problem here is a simple solution if you are using Nuxt-Link

Instead of using <nuxt-link to="#contact" >Contact</nuxt-link> which doesn't work. Use <nuxt-link :to="{ path: '/',hash:'#contact'}">Contact</nuxt-link>

path is the page you will navigate to

hash is the position you will scroll to

Hope this help someone.

Stanfordstang

Just tested in version ^2.0.0 of Nuxt and that does not seem to work. – Deception

works for me on the same version @FooBar, altough It doesn't scroll to the div, it simply goes to directly to the hash. I haven't messed with the default router scroll behavior. – Esau

In Nuxt 3.0.0 it actually works: <NuxtLink to="#contact"> – Quality

Answer 2

Using this way, with getBoundingClientRect().top+window.scrollY, works better to me in case of subsections:

if (to.hash) {
        let el = await findEl(to.hash)
        if ('scrollBehavior' in document.documentElement.style) {
          return window.scrollTo({ top: el.getBoundingClientRect().top+window.scrollY, behavior: 'smooth' })
        } else {
          return window.scrollTo(0, el.getBoundingClientRect().top+window.scrollY)
        }
      }

Revolting

A lifesaver! A legend! – Tomekatomes

Full implementation github.com/nuxt/nuxt/issues/12732#issuecomment-1397227372 – Hogan

Answer 3

A bit late but this is what I was able to achieve. Thanks to Sivuyile-TG-Magutywa

 <nuxt-link :to="{ path: localePath('index'),hash:'#about'}">
          {{ $t("menu.about") }}
 </nuxt-link>

output

https://www.shrek.com/fr/about

Nkrumah

Answer 4

I wanted to attach data ID to link so :

<div class="col" v-for="(item, index) in category.children.slice(0, 5)" :key="index">
<nuxt-link :to="{ path: localePath('/category/'+item.slug)}" target="_blank">

           

Coroneted