Vuepress: Unable to scroll to anchor

[JoeyBling]

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

Bug report

Steps to reproduce

1. Create a test folder
2. Put a README.md file in it
3. put the following text:

## 联系方式
Content ....
## 关于我
Content ....
## 开源推荐
Content ....

1. Launch vuepress dev
2. Enter the URL http://localhost:8080/#关于我

What is expected?

The browser should display the page scrolled at that 关于我 title position.

What is actually happening?

No reaction, at the top

Other relevant information

The title contains non ANSI characters

Console error:

[Vue warn]: Error in nextTick: "SyntaxError: Failed to execute 'querySelector' on 'Document': '#%E8%81%94%E7%B3%BB%E6%96%B9%E5%BC%8F' is not a valid selector."

• Output of npx vuepress info in my VuePress project:

  System:
    OS: Windows 10 10.0.18363
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 14.7.0 - E:\nodejs\node.EXE
    Yarn: 1.22.4 - E:\nodejs\node_global\yarn.CMD
    npm: 6.14.7 - E:\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @vuepress/core:  1.5.3
    @vuepress/theme-default:  1.5.3 (1.1.0)
    vuepress: ^1.5.3 => 1.5.3
  npmGlobalPackages:
    vuepress: Not Found

[dos077]

I think it has to do with scrollBehavior in core/lib/client/app.js -> createApp -> router = newRouter

It returns a selector of to.hash for scroll point. However, the hash is encodedURI, you can see it in router section of the vue debug tool. I think the selector should return decodeURI(to.hash) for satety.

[JoeyBling]

@dos077 Is it more appropriate to consider using the decodeURIComponent function

[dos077]

Right, there maybe special characters used in the hash. Fixed.

[Elringus]

I wonder if https://github.com/vuejs/vuepress/issues/2558 is related to this issue somehow. No non-ANSI characters in my case, though.

[JoeyBling]

@Elringus
I've tested that scrolling doesn't work even without special characters

[Elringus]

Does #2566 actually fix this? scrollBehavior() doesn't seem to invoke when opening a page for the first time.

[ycs77]

I also have the same problem, before #2566 is merged, can temporarily solve it with the following code:

If #2566 is merged and then updated to the new version

.vuepress/theme/components/Layout.vue

<script>
// ...
export default {
  // ...
  methods: {
    scrollTo(selector) {
      if (!selector || selector === '#') return
      const el = document.querySelector(decodeURIComponent(selector))
      if (el && el.offsetTop) {
        window.scrollTo(0, el.offsetTop)
      }
    }
  },
  mounted() {
    this.scrollTo(location.hash)
  }
}
</script>

[kidonng]

Just want to share my workaround:

// enhanceApp.js
export default () => {
  if (typeof document === 'undefined') return
  document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
      const { hash } = location
      const decoded = decodeURIComponent(hash)
      if (hash !== decoded) {
        document.querySelector(decoded).scrollIntoView()
      }
    }
  }
}

[billyyyyy3320]

Closed by #2639