Vuepress: links with anchors don't scroll to the correct position *the first time*

[koskimas]

• [x] I confirm that this is an issue rather than a question.

First of all, thank you so much for this awesome project and all the hard work you've put into it.

Bug report

Anchors in links to other pages within a vuepress site don't work the first time the link is clicked. "Don't work" means that the page is not scrolled to the element, but the sidebar does have correct item highlighted. Once the page is loaded the first time, any consecutive clicks through the link to that page do work as expected.

Version

1.0.0-alpha.46

Steps to reproduce

Go to this this address http://vincit.github.io/objection.js/new-docs/guide/getting-started.html

Click the second link (Model.knex(knex)).

• First time you do that: it goes to the correct page, highlights the correct item in the sidebar, but does not scroll to the correct place.

• Consecutive clicks: Everything works.

The code of that site can be found here

What is expected?

Links with anchors should work even when clikcing them the first time during a session.

What is actually happening?

Links with anchors don't scroll to the correct position the first time they are used.

Other relevant information

I know that I'm reporting a bug for an alpha version, but this bug existed also in all 0.X versions I tried, so I think there's something fundamental about this bug. Or I'm doing something colossally wrong.

• Your OS: Linux
• Node.js version: 10
• Browser version: Chrome 73
• Is this a global or local install? local
• Which package manager did you use for the install? npm
• Does this issue occur when all plugins are disabled? yes

[koskimas]

I found a way to reproduce this using vuepress's own site. Go to this link and click the first link with the text header on that page. Again, it doesn't scroll to correct position on the first try, but does when you go back and try again AFTER the page has been loaded.

It's not just that link. It's every link with an anchor. That's just the first one I happened to find :smile:

[koskimas]

I was able to make this work for now using this super hacky clientRootMixin:

module.exports = {
  watch: {
    $page(newPage, oldPage) {
      if (newPage.key !== oldPage.key) {
        requestAnimationFrame(() => {
          if (this.$route.hash) {
            const element = document.getElementById(this.$route.hash.slice(1));

            if (element && element.scrollIntoView) {
              element.scrollIntoView();
            }
          }
        });
      }
    }
  }
};

[koskimas]

but this bug existed also in all 0.X versions I tried

This doesn't seem to be true. There's no bug in 0.14.10 version. Feel free to close this, since this only concerns the alpha version after all.

[gauravve]

I am having the exact same issue with v1.0.0-alpha.47. Not sure why this should be closed as this is not happening in 0.x.

[koskimas]

Because it's an alpha version. Use the official release if you don't want to deal with bugs.

[gauravve]

Cool, but if we close this how will this be fixed in 1.x? Not sure if there are other ways to track bugs like this for 1.x

[koskimas]

I'm not a maintainer or contributor of this project. Contact the maintainers or reopen this if you want.

[gauravve]

Hi @koskimas , the hack you have suggested here works when configured in config.js under .vuepress folder?

I see that in your repository you are using Algolia search so dont might not need to hack anymore?

[koskimas]

I'm using the 0.x now. This issue doesn't concern me anymore.

[bloqhead]

For anyone interested, this issue still exists in v1.x. I have a site built with the latest version and we still encounter it on random links.

[faroit]

this seems to be still an issue, please reopen

[ubugnu]

Please fix it

[cferreras]

Still an issue

[faroit]

@koskimas can you reopen the issue please?

[TiEul]

I can also still reproduce this on Chrome. Works on Firefox, though.

[networkchimp]

+1

[networkchimp]

Ultra hack

// config.js

module.exports = {
...
  head: [
    "script",
    {
      src: "/scripts/scroll-to-hash.js",
    },
  ],
...
}

// scripts/scroll-to-hash.js

window.onload = function() {
  requestAnimationFrame(function() {
    if (location.hash) {
      const element = document.getElementById(location.hash.slice(1))

      if (element) {
        element.scrollIntoView()
      }
    }
  })
}

[rekmarks]

Reproduced in Firefox but not Chrome on https://docs.metamask.io with the following npx vuepress info:

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Edge: Not Found
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    @vuepress/core:  1.5.4
    @vuepress/theme-default:  1.5.4
    vuepress: ^1.5.4 => 1.5.4
  npmGlobalPackages:
    vuepress: Not Found

Ref: #2589