Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?)

like image 462
shikinen Avatar asked Apr 09 '19 18:04

shikinen


3 Answers

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.

like image 179
Sivuyile TG Magutywa Avatar answered Nov 12 '22 14:11

Sivuyile TG Magutywa


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
like image 28
Thomas Uchiha Avatar answered Nov 12 '22 16:11

Thomas Uchiha


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

like image 1
Bruno Reis Silvino Avatar answered Nov 12 '22 16:11

Bruno Reis Silvino