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>
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
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
})
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.