anchors do not work #5359

syffs · 2019-03-24T00:35:34Z

Version

v2.5.1

Reproduction link

https://codesandbox.io/s/mz4wjpzy18

Steps to reproduce

click anchored link
scroll back up
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.

The text was updated successfully, but these errors were encountered:

syffs · 2019-03-24T01:03:43Z

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 · 2019-03-24T13:46:39Z

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 · 2019-03-24T17:22:34Z

@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 · 2019-03-24T17:46:38Z

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 · 2019-03-24T17:48:47Z

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

syffs · 2019-03-24T17:56:31Z

@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 · 2019-04-02T20:26:03Z

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 · 2019-04-23T21:11:56Z

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:

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

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

folamy · 2019-10-09T09:08:33Z

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 · 2019-10-23T00:13:08Z

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 · 2019-11-29T09:08:55Z

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:

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

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

belgacea · 2020-02-29T09:15:31Z

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

roncarino · 2020-03-01T12:22:36Z

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 · 2020-03-09T18:51:22Z

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

rylax · 2020-03-18T19:11:29Z

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 · 2020-04-29T14:17:39Z

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

FabianEllenberger · 2020-05-13T18:07:09Z

@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 · 2020-06-18T05:20:27Z

Is there any news on the standard and recommended (not a workaround) solution?

fpolica91 · 2020-10-20T01:53:06Z

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 · 2020-11-18T02:56:36Z

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

raym0nd93 · 2021-02-23T11:03:47Z

Been almost 2 years now, any update?

jonasdumas · 2021-03-04T19:52:47Z

+1

danielroe · 2021-03-05T14:33:45Z

Looking at this, it's an upstream issue in vue-router - see vuejs/vue-router#1668 for description, reproduction and some workarounds. Nothing in scrollBehavior will be able to fix this because as far as vue-router is concerned, a route navigation hasn't happened so scrollBehavior is never called.

m-emre-yalcin · 2021-05-11T20:54:21Z

maybe the main element doesn't overflow and breaking the anchor functionality?

HenrijsS · 2021-07-27T21:23:26Z

Workaround for me is just adding a method to the click:

<nuxt-link
  ref="calculator"
  v-bind:to="{ path: '/', hash: '#calculator' }"
  v-on:click.native="scrollToSection('#calculator')"
>

scrollToSection(section) {
  if (this.$nuxt.$route.name === 'index') {
    const navHeight = document.getElementById('navigation').offsetHeight;
    window.scrollTo({
      top: document.querySelector(section).offsetTop - navHeight,
      behavior: 'smooth',
    });
  }
},

Of course you can add this method globally and just pass the section on buttons clicks.

NuxtLink hash scroll does not scroll back to the top of filter bar if user manually scrolled to bottom Related Issue: nuxt/nuxt#5359 Solution: Install vue-scrollto package and move scroll to element to outside of sticky element

rolexta · 2021-10-31T13:25:54Z

got an issue if anchor tag is generated from kind of WYSISWYG editor from the CMS, when click all anchor tag with hash url it makes the page reload again

HenrijsS · 2021-10-31T13:44:27Z

@rolexta Make sure that the anchor doesn't include a "/" before the "#"

fkoosan · 2021-11-22T07:52:40Z

Since then, I have confirmed that it works normally with nuxt v2.15.8 by the following method.
・Url input

http://localhost:3000/#test

・ Anchor in the page

<a href="#test"> move to test </a>

I would appreciate it if you could refer to it.

◆ app / router.scrollBehavior.js

/*
 ** nuxt-link Top Scroll
 */
export default function (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else if (to.hash) {
    return {
      selector: to.hash,
    }
  } else {
    return { x: 0, y: 0 }
  }
}

◆ Target page.vue

<template lang="pug">
〜omit〜
  #test TEST
〜omit〜
</template>

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

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

josh-collinsworth · 2022-05-04T19:22:24Z

I am running into this issue with Nuxt Bridge, using "nuxt-edge": "latest" and "@nuxt/bridge": "npm:@nuxt/bridge-edge".

No matter what I do, the router never has a value for either hash or query. Even if I explicitly use $router.push, like this:

this.$router.push({ to: '/some-path', hash: '#any' })

It still doesn't work; the hash is just an empty string. Tried with and without the # or a /. Tried using NuxtLink with the entire path as the to attribute; nothing helps. The router just seems to delete the hash and query every time no matter what. (Which means none of the workarounds here is viable in my case, because the hash attribute doesn't exist.)

danielroe · 2022-05-04T20:58:27Z

@josh-collinsworth It seems to be working fine for me: https://stackblitz.com/edit/github-n3gkty. Note that if you are using object syntax then you use path and not to.

adamchipperfield · 2022-05-16T12:42:32Z

Is there a way we can get this working without hard coded solutions? I have an app where we're passing whatever link is defined in the CMS to nuxt-link.

Lucsy3012 · 2022-08-22T13:55:11Z

Still no updates on this without using workarounds? I'm no leaning towards just using an <a> with href="#anchor" instead. The smooth scrolling effect can also be achieved by adding this to the CSS.

html {
    scroll-behavior: smooth;
}

ryanklarhoelter · 2022-08-23T06:52:47Z

I think that might be fixed by this PR:

vuejs/vue-router#3592

Isn't it?

ankitsinghaniyaz · 2022-10-22T07:08:44Z

Waiting for this to be sorted out 😅

bexter89 · 2022-10-25T14:57:58Z

saaame 👀

bayasdev · 2022-12-15T21:01:09Z

Is this ever going to be fixed? 🤔

rchl · 2023-03-25T23:53:50Z

Appears to be working fine now, after vue-router bug was fixed. I've taken the initial codesanbox example, exported it, updated Nuxt to 2.16.3, ran yarn upgrade and it worked as expected.

manniL · 2023-03-26T10:30:57Z

Closing here then 👍🏻

ghost added the cmty:bug-report label Mar 24, 2019

stale bot added the stale label Apr 23, 2019

stale bot closed this as completed Apr 30, 2019

marinaaisa mentioned this issue Oct 28, 2019

[ISSUE-270] Change all nuxt-links left qiskit-community/community.qiskit.org#102

Merged

3 tasks

manniL reopened this Oct 30, 2019

stale bot removed the stale label Oct 30, 2019

stale bot added the stale label Nov 29, 2019

manniL added the pending label Nov 29, 2019

stale bot removed the stale label Nov 29, 2019

ninest mentioned this issue May 24, 2020

Suggestion: add heading tag anchors marinaaisa/nuxt-markdown-blog-starter#12

Open

nuxt deleted a comment from ashokpokharel977 Aug 20, 2020

danielroe self-assigned this Mar 5, 2021

danielroe added the waiting for dependency label Mar 5, 2021 — with Volta.net

mcmcgrath13 mentioned this issue Feb 3, 2022

feat: adds about menu brown-ccv/ccv-website-nuxt#90

Merged

2 tasks

danielroe added 2.x pending triage and removed bug-report labels Jan 18, 2023

manniL closed this as not planned Won't fix, can't repro, duplicate, stale Mar 26, 2023

thnaylor mentioned this issue Sep 3, 2023

feat: terms of use page kodadot/nft-gallery#7112

Merged

16 tasks

anchors do not work #5359

anchors do not work #5359

Comments

syffs commented Mar 24, 2019 • edited Loading

Version

Reproduction link

Steps to reproduce

What is expected ?

What is actually happening?

Additionnal comment

syffs commented Mar 24, 2019 • edited Loading

danielroe commented Mar 24, 2019 • edited Loading

syffs commented Mar 24, 2019 • edited Loading

danielroe commented Mar 24, 2019

usb248 commented Mar 24, 2019

syffs commented Mar 24, 2019

chanmathew commented Apr 2, 2019 • edited Loading

stale bot commented Apr 23, 2019

folamy commented Oct 9, 2019

seanohue commented Oct 23, 2019

stale bot commented Nov 29, 2019

belgacea commented Feb 29, 2020 • edited Loading

roncarino commented Mar 1, 2020 • edited Loading

garyo commented Mar 9, 2020

rylax commented Mar 18, 2020

gaugau3000 commented Apr 29, 2020

FabianEllenberger commented May 13, 2020

vadimyen commented Jun 18, 2020

fpolica91 commented Oct 20, 2020 • edited Loading

fkoosan commented Nov 18, 2020 • edited Loading

raym0nd93 commented Feb 23, 2021

jonasdumas commented Mar 4, 2021

danielroe commented Mar 5, 2021 • edited Loading

m-emre-yalcin commented May 11, 2021

HenrijsS commented Jul 27, 2021 • edited Loading

rolexta commented Oct 31, 2021

HenrijsS commented Oct 31, 2021

fkoosan commented Nov 22, 2021

josh-collinsworth commented May 4, 2022

danielroe commented May 4, 2022

adamchipperfield commented May 16, 2022

Lucsy3012 commented Aug 22, 2022

ryanklarhoelter commented Aug 23, 2022

ankitsinghaniyaz commented Oct 22, 2022

bexter89 commented Oct 25, 2022

bayasdev commented Dec 15, 2022

rchl commented Mar 25, 2023

manniL commented Mar 26, 2023

syffs commented Mar 24, 2019 •

edited

Loading

syffs commented Mar 24, 2019 •

edited

Loading

danielroe commented Mar 24, 2019 •

edited

Loading

syffs commented Mar 24, 2019 •

edited

Loading

chanmathew commented Apr 2, 2019 •

edited

Loading

belgacea commented Feb 29, 2020 •

edited

Loading

roncarino commented Mar 1, 2020 •

edited

Loading

fpolica91 commented Oct 20, 2020 •

edited

Loading

fkoosan commented Nov 18, 2020 •

edited

Loading

danielroe commented Mar 5, 2021 •

edited

Loading

HenrijsS commented Jul 27, 2021 •

edited

Loading