the anchor may be a bug and a development issue with Custom Theme in scrollbar

[Lost-genban]

Is your feature request related to a problem? Please describe.

This is the translated issue for your convenience in reading！！！

1. When scrolling the page content page anchors are not calibrated. I'm not sure if this is by design or if it's a problem. I found this problem when I was developing a custom theme.

2. For example, when I enter the website, https://vitepress.dev/guide/what-is-vitepress I click on the anchor to successfully scroll to https://vitepress.dev/guide/what-is-vitepress#use-cases and then I scroll down when I want to. and then I scroll down when I want. The #use-cases here does not change. I press enter at the url to refresh, and scroll to my original #use-cases anchor, which causes the page to scroll to the anchor it's on, and then there's a return to the anchor that was at the start of the refresh If you don't understand what I'm saying,
   Press enter and you see that the page will jump from the correct #use-cases anchor to the abnormal position.

Here's the problem I'm seeing in comparison to vuepressX2.

(3. Is there a good solution to this problem, when I use the new scrollbar to develop custom themes, I see the export function scrollTo scrollTo method used in router.js. It's all solved by using window.scrollTo(xxx,xxx). When I use a custom theme, for example, I use the component overlayscrollbars-vue. It has its own encapsulated scrollTo method instead of the dead window.scrollTo(xx,xxx,xx), what should I do with this, just rewrite the router-like method in layout.vue file to override it? I think it's a bit too much of a hassle and affects performance.

Describe the solution you'd like

1 2 I'm not sure if this is a bug, but I'd like to know. I'd also like to know if there's a good solution for issue 3. Currently in development, when you click on an anchor, you can write a window.addEventListener('click', (e) => { xxx scrollTo(xxx,xxx) }) and then encapsulate a scrollTo method. But #router is on the write side. It's a bit of a pain in the arse . Is there any possibility that vitepress can pass the parameter difference in config and then when developing a custom theme that involves scrollTo, it can be encapsulated and thrown to the developer to write the scrolling logic. That's a wild guess, and it might be a bit tricky. Or is there another way to improve this?

Describe alternatives you've considered

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

You need to handle that in your own code. You don't need scrollTo. You need a scroll handler that gets the hash of nearest heading and add it to url:

history.replaceState(null, document.title, hash ? hash : ' ')

In the default theme, it's by design as changing hash on scroll causes a lot of issues.

Refer our earlier implementation where we had that: https://github.com/vuejs/vitepress/blob/baf8083/src/client/theme-default/composables/outline.ts

[Lost-genban]

I mean, when developing a custom theme, I wrote a new scrollbar to replace the one that comes with the browser, and I have to deal with the fact that when I click on an anchor, the scrollbar jumps to the corresponding anchor, and when the url has an anchor, the scrollbar also jumps to the corresponding anchor automatically?

[brc-dd]

How and why are you writing a new scrollbar?!

I have to deal with the fact that when I click on an anchor, the scrollbar jumps to the corresponding anchor

Browser scrollbars should handle this by default, but if you've written some custom thing, then yeah, you'd need to handle this yourself.

when the url has an anchor, the scrollbar also jumps to the corresponding anchor automatically

This isn't needed. You need to handle just the scrolling. If the user is near a heading, then update the hash in URL.