NuxtLink to hash

Question

I'm trying to use a NuxtLink to scroll to an anchor tag. From the docs I see I need to create this file app/router.scrollBehavior.js and place my code there.

For example, this works. It scrolls 500px in the y axis, but what I really want is to scroll to the hash.

export default function (to, from, savedPosition) {
  if (to.hash) {
    return { x: 0, y: 500 }
  }
}

Events Page

<div
  v-for="(event, i) in events"
  :id="event.id"
  :ref="event.id"
  :key="i"
>
</div>

Navigation Component

<NuxtLink
  v-for="item in items"
  :key="`item.id"
  :to="item.href"
>
  {{ item.name }}
</NuxtLink>

I haven't been able to make it scroll to the hash. I tried several options an none of them seems to work. For example:

Does not work (I also tested with selector instead of el)

export default function (to, from, savedPosition) {
  if (to.hash) {
    return {
      el: to.hash,
      behavior: 'smooth',
    }
  }
}

Does not work

export default function (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    if (to.hash) {
      setTimeout(() => {
        resolve({
          el: to.hash,
          behavior: 'smooth',
        })
      }, 500)
    }
  })
}

Any ideas about what it could be the problem?

I achieved it once [like this](https://stackoverflow.com/a/70146096/8816585). — kissu, Dec 14 '21 at 07:50
Do you have what you're expecting in `to.hash` and also, how is your template looking? — kissu, Dec 14 '21 at 07:52
@kissu The `to.hash` looks something like this `#world-event` — Javier Cárdenas, Dec 14 '21 at 14:20
I updated the question and added the events page and navigation component. — Javier Cárdenas, Dec 14 '21 at 14:44
So, what is not working? Did you tried my linked answer above? — kissu, Dec 14 '21 at 15:08
The scroll is not working. I did not use Vue.Scroll before so I'm trying your solution. Thx! — Javier Cárdenas, Dec 14 '21 at 15:10
Does this answer your question? [How to smoothly scroll to an element via a hash in Nuxt?](https://stackoverflow.com/questions/70140870/how-to-smoothly-scroll-to-an-element-via-a-hash-in-nuxt) — kissu, Dec 14 '21 at 17:07

score 2 · Answer 1 · edited Dec 14 '21 at 17:07

Ok, so finally this is what worked for me. I had to install Vue-Scroll and inside app/router.scrollBehavior.js

import Vue from 'vue'
import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

export default function (to, from, savedPosition) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (to.hash) {
        VueScrollTo.scrollTo(to.hash, 300, { easing: 'linear', offset: -60 })
      }
    }, 500)
  })
}

I used this answer as a reference How to smoothly scroll to an element via a hash in Nuxt? but I had to change the setTimeOut time from 10ms to 500ms because it wasn't working properly on my static page.

NuxtLink to hash

1 Answers1