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

• 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

[faroit]

this seems to be still an issue, please reopen

[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: https://github.com/typesense/typesense-website/commit/48170484e14598d06baa448f0c5533f8bb3a8a97#diff-2d43cf89606a96dc1e5a75a023d3d30190e998b5abd19c2eae2179f25053b28bR75-R100

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