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

[koskimas]

• 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 😄

[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.

[stevefrench39]

+1

[stevefrench39]

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

[jasonbosco]

In my case this issue seemed to only happen on pages with a lot of content. Sometimes the page would not scroll at all from the top and other times it would scroll to the wrong place on the page.

After some debugging I found out that in this line in vuepress-plugin-smooth-scroll, sometimes targetElement is null (when the page load takes a long time for eg) and other times getElementPosition returned the wrong value (guessing that the page contents were repositioned after more elements were rendered on the page?).

So to fix this, I added a window.onload function that triggers this scroll behavior after the page had fully loaded. This seems to have addressed the scroll issues I was seeing.

Here's my complete solution in a custom plugin: typesense/typesense-website@4817048#diff-2d43cf89606a96dc1e5a75a023d3d30190e998b5abd19c2eae2179f25053b28bR75-R100

If this is a sane approach, happy to submit this as a PR. Let me know!

[ctrlaltdylan]

Thank you @jasonbosco ! Works for me in Vuepress v1.8.3

[mwmentor]

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

I can confirm that this is the case... works in Firefox, not Chrome. I haven't applied the patch yet... but will take a look-see if it helps.

[34fame]

I tried v1.8.3 and latest (v1.9.7) and anchored links still have problems.

• Firefix works
• Chrome highlights left menu but doesn't scroll
• Safari highlights left menu but doesn't scroll

Environment Info:

  System:
    OS: macOS 12.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.19.1 - ~/.nvm/versions/node/v14.19.1/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.1/bin/npm
  Browsers:
    Chrome: 100.0.4896.88
    Edge: Not Found
    Firefox: 99.0
    Safari: 15.4
  npmPackages:
    @vuepress/core:  1.9.7
    @vuepress/theme-default:  1.9.7
    vuepress: ^1.9.7 => 1.9.7
  npmGlobalPackages:
    vuepress: Not Found

NOTE: Using anchor links from the Vuepress documentation site work fine!

[cpadilla]

I'm using v1.9.7 and I've tried the solutions proposed by @koskimas, @networkchimp1, and @jasonbosco on Chromium but for whatever reasons none of them seemed to work for me, which I found surprising at least one didn't. Perhaps I'm doing something wrong.

Regardless, this still seems to be an issue. I'm wondering if @jasonbosco's solution works on chrome or enough people can vouch that it works if we can't open a PR for it on vuepress-plugin-smooth-scroll. There doesn't seem to be any mention of this issue there and based on his debugging, it seems like that's where the issue lies.

[sweihub]

I found a workaround which fixed my issue
#2562 (comment)