0

I have a website where content is loaded from markdown then rendered. The rendered content has headers (h1, h2 etc.) with automatically generated anchors.

If I click on the anchor, it scrolls nicely to have it on top - but if I copy the URL and paste it to another tab, page loads but doesn't scroll.

Sample URL: localhost/articles/16/gq#one-endpoint-one-request-multiple-resources

I would love to show some code, but there's nothing I can show - scrolling to anchors is Nuxt's default behavior as seen here: https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/router.scrollBehavior.js

Here's my code for debugging, checking if hash and the element to scroll to exists.

mounted()
{
    console.log(this.$route.hash)

    console.log(document.querySelector(this.$route.hash))
},

.. clearly, they both do:

yes

1 Answer 1

0

Found a solution, use this: https://www.npmjs.com/package/nuxt-page-transition-and-anchor-handler :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.