[Bug]: Scroll location persists between doc pages in Storybook 7

[noranda]

Describe the bug

If I'm on a doc page for one of my components and scroll down, then click on the side bar to navigate to a different component's doc page, the scroll location will persist instead of bringing me back to the top. Is this by design? Is there a way to make sure any navigation resets the scroll location?

To Reproduce

Repo: https://github.com/ezcater/recipe/tree/nb/storybook-docs-ezalert
Working link: https://628e5250d2515a004ac66087-pqycaehqkc.chromatic.com

1. Click on "Getting Started".
2. Scroll down a bit.
3. Click on "Contributing".

Notice the scroll persists. It should return to the top in a new doc page.

System

System:
    OS: macOS 13.2
    CPU: (10) arm64 Apple M1 Pro
  Binaries:
    Node: 18.15.0 - ~/.asdf/installs/nodejs/18.15.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.15.0/.npm/bin/yarn
    npm: 9.5.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 99.0
    Safari: 16.3

Additional context

No response

[noranda]

Hello! Try this link: https://628e5250d2515a004ac66087-pqycaehqkc.chromatic.com

…

On May 16, 2023 at 1:04 PM -0400, Aayush895 ***@***.***>, wrote: Hello, I am new in open source contribution and came across this issue. I am trying to replicate the above issue but the URL is not working. Can you please help me with that? Thanks — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[Aayush895]

Hello! Try this link: https://628e5250d2515a004ac66087-pqycaehqkc.chromatic.com
…
On May 16, 2023 at 1:04 PM -0400, Aayush895 @.>, wrote: Hello, I am new in open source contribution and came across this issue. I am trying to replicate the above issue but the URL is not working. Can you please help me with that? Thanks — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.>

Hi, thanks for the reply. I setup the project on my local machine and it's up and running. Can you please help me navigate to the repo where I have to work because the repo link provided here is re-directing me to the default branch

[noranda]

Can you please help me navigate to the repo where I have to work because the repo link provided here is re-directing me to the default branch

Sure thing! Try this one: https://github.com/ezcater/recipe/tree/nb/fix-doc-guide-links

[Aayush895]

Can you please help me navigate to the repo where I have to work because the repo link provided here is re-directing me to the default branch

Sure thing! Try this one: https://github.com/ezcater/recipe/tree/nb/fix-doc-guide-links

Hi, Sorry if this sounds like a dumb question but I was trying to find the files on which I have to work, but I wasn't able to find the particular file where the necessary changes have to be made. So I was wondering if you can guide me in that direction. I am really new to open source so that's why I am struggling a lot.

[ssingh3856]

Is this issue still open? If so can i please work on this?

[ritiksharmarj]

@noranda Hi, I guess this bug is resolved already.

I checked it here at https://628e5250d2515a004ac66087-pqycaehqkc.chromatic.com/ and scroll location is set to top. Could you please let me know if this bug still exists then I want to work on this.

[noranda]

Hi @ritiksharmarj. Unfortunately, this isn't yet resolved. The scroll location will reset to the top the first time you load a page, but try switching between the two pages again and you'll see the issue persists.

To reproduce:

1. Go to: https://628e5250d2515a004ac66087-iyuwqwrxjs.chromatic.com/ (uses storybook 7.0.18)
2. Click on 'Getting Started' to do an initial load.
3. Click on 'Principles' and scroll down.
4. Click back on 'Getting Started'.

[ritiksharmarj]

Yeah right. It still persists. @noranda please assign it to me, I want to work on this.

[noranda]

Yeah right. It still persists. @noranda please assign it to me, I want to work on this.

I'm unable to assign, but feel free to take a stab at it! I'd love to get this resolved!

[MiroslavPetrik]

I'm experiencing this as well.

Possible workaround is using the link anchors.
The markdown normalizes the heading titles as hrefs as hyphenated lower-case alphabet e.g.
# checkboxField() becomes href="checkboxfield".

so you can append the anchor to your links: [page](./?path=/docs/page--docs#checkboxfield).

e.g.
Here are my docs with link at the bottom of the page

where you can click on the checkboxField link which scrollsTop eventually as the workarround.

But still there is some jigg jagg as you hit the link 😬

[noranda]

Possible workaround is using the link anchors.

Thanks @MiroslavPetrik. I've also been using this anchor workaround for links, but unfortunately it doesn't help with direct navigation.