javascriptvue.jsnuxt.jsvue-routernuxt-link

nuxt-link: redirect to the same anchor with hash


I'm using a <nuxt-link> component in my Nuxt application and I have the following problem:

How could I overwrite this behavior so that when I click on the nuxt-link, it scrolls to the desired section regardless of what I have clicked before ? (Without refreshing the page)

Here is what my nuxt-link looks like

<nuxt-link :to="{ path: localePath('/'), hash: '#homepage' }"
>
  <span>Homepage</span>
</nuxt-link>

Solution

  • 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
            })
          }
        }
      }