Scroll to anchor doesn't work under Chrome when smooth scrolling is disabled

[elringus]

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

Bug report

Steps to reproduce

1. Navigate to the following link using Chrome browser: https://naninovel.com/guide/integration-options.html#switching-modes
2. Notice the page not scrolling to the specified anchor (even though the header is selected in sidebar).

Here is the source repo: https://github.com/Elringus/NaninovelWeb
UPDATE: I've fixed the issue in the repo with naninovel/docs@7148c30

What is expected?

Page scrolling to the specified anchor.

What is actually happening?

Page not scrolling to the specified anchor.

Other relevant information

Not reproducing with Firefox and Edge browsers.
Not reproducing when smooth scrolling is enabled.

• Output of npx vuepress info in my VuePress project:

Environment Info:

  System:
    OS: Windows 10 10.0.18363
    CPU: (16) x64 Intel(R) Core(TM) i7-6900K CPU @ 3.20GHz
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.18362.449.0
  npmPackages:
    @vuepress/core:  1.5.2
    @vuepress/theme-default:  1.5.2
    vuepress: 1.5.2 => 1.5.2
  npmGlobalPackages:
    vuepress: Not Found

Chrome (it's not displayed in the environment info for some reason): Version 84.0.4147.105 (Official Build) (64-bit)

[stdrc]

Not reproducing with Firefox and Edge browsers.
Not reproducing when smooth scrolling is enabled.

Doesn't work on Safari too, even with smoothScroll set to true.

[elringus]

#2566 doesn't seem to fix this issue, as scrollBehavior() function is not invoked at all when opening a page for the first time.

I'm trying to fix the issue, but I have zero knowledge about vuepress, so it's problematic to even figure where to start looking for. Would really appreciate any advice.

[elringus]

Following fixes the issue: naninovel/docs@7148c30

[kujawa-radoslaw]

Following fixes the issue: Naninovel/Documentation@7148c30

@elringus, thanks for sharing your solution!

This will work only if you don't have much headers in your page. Otherwise, the core thread will stop the scroll in the middle of the page. To fix it you can set a small timeout:

setTimeout(() => {
    if (location.hash && location.hash !== '#') {
      const anchorLocation = decodeURIComponent(location.hash)
      const anchorElement = document.querySelector(anchorLocation)
      if (anchorElement && anchorElement.offsetTop)
        anchorElement.scrollIntoView()
      }
    }, 100)

Cheers!

Edit:

or even better:

        if (window.addEventListener) {
            window.addEventListener('load', () => {
              if (location.hash && location.hash !== '#') {
                const anchorLocation = decodeURIComponent(location.hash)
                const anchorElement = document.querySelector(anchorLocation)
                if (anchorElement && anchorElement.offsetTop)
                  anchorElement.scrollIntoView()
                }
            }, false);
        }

[dfearnley]

This solution does not solve the issue completely with regards to accessibility. Although the element is scrolled into view, the focus is not set to the element. If the keyboard and or screen reader is being used to navigate the site, the focus will still be on the link, not the target. Chrome version 91.0.4472.114 - macOS Catalina 10.15.7. This is also true when clicking a "#some_target" link within the page itself - i.e. not just parachuting to the target from another page.