vuepress: 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

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 8
Comments: 24

Commits related to this issue

Fix dumbass VuePress See here: https://github.com/vuejs/vuepress/issues/1499 — committed to dortania/OpenCore-Install-Guide by khronokernel 4 years ago
Fix pages not loading on correct anchor vuejs/vuepress#1499 — committed to DoctorMcKay/sentry-bot-documentation by DoctorMcKay 3 years ago

Most upvoted comments

this seems to be still an issue, please reopen

faroit on Jun 5, 2020

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!

jasonbosco on May 26, 2021

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

stevefrench39 on Jul 25, 2020

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!

34fame on Apr 16, 2022

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

ctrlaltdylan on Feb 16, 2022

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

TiEul on Jul 24, 2020

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

koskimas on Apr 13, 2019