Nuxt.js: anchors do not work

[syffs]

Version

v2.5.1

Reproduction link

https://codesandbox.io/s/mz4wjpzy18

Steps to reproduce

1) click anchored link
2) scroll back up
3) click same anchored link => nothing happens

What is expected ?

working anchors accessible from any page (same or different)

What is actually happening?

no navigation is perfomed

_{This bug report is available on Nuxt community (#c8910)}

Additionnal comment

default scrollBehavior does not allow to reach anchors on the same page, but overriding it partially fixes the issue.

[syffs]

the workaround I found is to combine to and v-scroll-to:

<nuxt-link :to="{path: '/', hash: 'anchor'}" v-scroll-to="{el: '#anchor'}">link</nuxt-link>

[danielroe]

Have you tried hash: '#anchor'?

You can see the default scrollBehavior here and you can override this.

I typically use something like this:

  router: {
    scrollBehavior: async function(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      }

      const findEl = async (hash, x = 0) => {
        return (
          document.querySelector(hash) ||
          new Promise(resolve => {
            if (x > 50) {
              return resolve(document.querySelector("#app"));
            }
            setTimeout(() => {
              resolve(findEl(hash, ++x || 1));
            }, 100);
          })
        );
      };

      if (to.hash) {
        let el = await findEl(to.hash);
        if ("scrollBehavior" in document.documentElement.style) {
          return window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
        } else {
          return window.scrollTo(0, el.offsetTop);
        }
      }

      return { x: 0, y: 0 };
    }
  },

[syffs]

@danielroe I did know that it could be overrided, but default scrollBehavior looks fine to me... I'll try to play with this one.

Playing with the repro link, hash: '#anchor' or hash: 'anchor' has the same effect. Only a full refresh of the page actually leads to #anchor

[danielroe]

Yes, I understand, and agree there's an issue. It looks like hashes work if the page changes (try clicking the link from /about), but not otherwise. I suggest it is to do with the window.$nuxt.$once call.

[usb248]

It doesn't work in nuxt 2.4.5 too. On first load, no scroll behavior too.

[syffs]

@danielroe exactly. clicking on an anchored link, scrolling back up and clicking again: 2nd time doesn't work.

It might be an issue with vue-router though

[chanmathew]

Also running into this issue with 2.5.1, but trying this workaround here for now: https://forum.vuejs.org/t/how-to-handle-anchors-bookmarks-with-vue-router/14563/5 (See 2nd last comment for solution)

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[folamy]

Nor of the suggested solutions works in latest nuxt version v2.10.0
another thing that gives me concern is that I tried to log document.querySelector() in mounted and it returns null
mounted () { console.log(document.querySelector('#loginView')) }
result: null

[seanohue]

Any chance of re-opening this issue as it has not been fixed and, based on @folamy 's comment, seems to have gotten worse?

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[belgacea]

Any news on this issue ? Facing it on v2.11.0

[roncarino]

Also running into this issue with 2.5.1, but trying this workaround here for now: https://forum.vuejs.org/t/how-to-handle-anchors-bookmarks-with-vue-router/14563/5 (See 2nd last comment for solution)

Hi, I am quite a newbie with Nuxt JS, which is amazing btw.
As @belgacea I am on v2.11.0 and facing this problem. I have used the workaround linked by @chanmathew which I am quoting. Do you have an idea on how to add a "smooth" behaviour to that as well? That solution is ok to me, for the moment, but it does look quite ugly to jump to the anchor in that way, without any fake scrolling.
Thanks for any suggestions/solutions :)

Cheers, Loris

[garyo]

I'm also interested in seeing a "standard" solution to this.

[rylax]

Have you tried hash: '#anchor'?

You can see the default scrollBehavior here and you can override this.

I typically use something like this:

  router: {
    scrollBehavior: async function(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      }

      const findEl = async (hash, x = 0) => {
        return (
          document.querySelector(hash) ||
          new Promise(resolve => {
            if (x > 50) {
              return resolve(document.querySelector("#app"));
            }
            setTimeout(() => {
              resolve(findEl(hash, ++x || 1));
            }, 100);
          })
        );
      };

      if (to.hash) {
        let el = await findEl(to.hash);
        if ("scrollBehavior" in document.documentElement.style) {
          return window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
        } else {
          return window.scrollTo(0, el.offsetTop);
        }
      }

      return { x: 0, y: 0 };
    }
  },

Thank you so much! This worked perfectly for me.

[gaugau3000]

A workaround can be to use VueScrollTo library.
Please look at https://github.com/rigor789/vue-scrollto/issues/251 issue status before using it (work only as a plugin for now)

[FabianEllenberger]

@danielroe Thanks, your solution seems to work. But this generates the issue, that nuxt will no longer scroll back to top on each route change automatically, even when using srcollTop: true on every page manually. I'm using Nuxt 2.4.0.

[vadimyen]

Is there any news on the _standard and recommended_ (not a workaround) solution?

[fpolica91]

Ok I had been struggling with this issue all day today, what I did is inserted the snippet I will leave below in my nuxt.config.js. The following way
` router: {
scrollBehavior: async function(to, from, savedPosition) {
if (savedPosition) {
return savedPosition;
}

  const findEl = async (hash, x = 0) => {
    return (
      document.querySelector(hash) ||
      new Promise(resolve => {
        if (x > 50) {
          return resolve(document.querySelector("#app"));
        }
        setTimeout(() => {
          resolve(findEl(hash, ++x || 1));
        }, 100);
      })
    );
  };

  if (to.hash) {
    let el = await findEl(to.hash);
    if ("scrollBehavior" in document.documentElement.style) {
      return window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
    } else {
      return window.scrollTo(0, el.offsetTop);
    }
  }

  return { x: 0, y: 0 };
}

}`

[fkoosan]

Also running into this issue with 2.5.1, but trying this workaround here for now: https://forum.vuejs.org/t/how-to-handle-anchors-bookmarks-with-vue-router/14563/5 (See 2nd last comment for solution)

I have confirmed that the anchor link transitions by the following method with reference to this.
But,
Example
https://localhost:3000/test/#name
However, using mounted did not improve the phenomenon that the anchor link did not transition. I hope it will be supported.

  watch: {
    $route() {
      if (this.$route.hash) {
        setTimeout(() => this.scrollTo(this.$route.hash), 1)
      }
    }
  },
  mounted: function() {
    if (this.$route.hash) {
      this.$router.push({ hash: '' })
    }
  },

  methods: {
    scrollTo: function(hash) {
      setTimeout(() => {
        location.href = hash
      }, 1)
    },