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?)
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.
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
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)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With