[Vuejs]-Nuxt-link: redirect to the same anchor with hash

by

1👍

✅

Got it to work with this function bound to a click.native event as suggested by @Merc.

handleScroll(anchorId: string): void {
    if (this.$route.hash) {
      const anchor = document.querySelector(`#${anchorId}`)

      // Check if the anchor has been found
      if (anchor) {
        window.scrollTo({
          // Scroll so that the anchor is at the top of the view
          top: anchor.getBoundingClientRect().top + window.pageYOffset
        })
      }
    }
  }
👤Théo Lavaux

2👍

I believe that you should be able to add a click handler to your nuxt-link.

<nuxt-link
  :to="{ path: localePath('/'), hash: '#homepage' }"
  @click.native="scroll"
>
  Homepage
</nuxt-link>

(not sure about the @click.native, if that does not work just try @click)

And then within your methods:

methods: {
    scroll() {
      // your scroll function, probably reading document.documentElement.scrollTop or similar
    // if necessary check this.$route if the hash is already present, if so only do it in that case...
    },
}

Hope that gives you a point to start?!
Cheers

👤Merc

Leave a comment