Sidebar menu reloads to the top and user has to scroll down to find an item

[andreamussap]

In a long sidebar menu, when the user wants to navigate in a doc set, which is way down in the menu structure, every time the user clicks a menu item, the entire menu is reloaded (??) to the top. Then, the user has to scroll all the way down in the menu to find the item that they've just clicked.

https://www.loom.com/share/a259028d884d40ec96b98cc2165d6df8

It's tiring and confusing having to scroll down the menu every time that you click an item. So I'd like to ask if you could show/stuck the menu where the user is, like for example, on MS docs, no matter how long the menu is, it always shows the part of the menu where I am navigation at the moment.

See screenshot below, although I'm way down in the menu, it didn't scrolled to the top, it's stuck, showing the part where I am navigating. If I click any item inside 'Database sharding', the menu stays where it its, I don't have to scroll to find the item that I had clicked.

BTW, Docsy is an amazing project, guys. Thank you!!

[alexearnshaw]

@LisaFC A couple of our users have reported this problem now for our Docsy site https://axway-open-docs.netlify.app/docs/

I presume it's only an issue for larger sites like ours with a long left navigation? Any suggestions what might be causing it/how we can fix?

[prdsoftware]

Yep, I've noticed this also. It's not friendly at all. Is there any setting / fix that can be done?

[Prachi-Srivastava-13]

We are also facing this issue in our internal site based off of docsy. Its pain to navigate through the pages with scroller being reset to the top. Can we have a fix for this?

[narrenfrei]

I had already made a working solution (mentioned in #348) for this issue in my pipeline, but I'm afraid that this tweak got lost by some code merging problems. The only fragment of my code I can find is here: https://github.com/narrenfrei/docsy/commit/09fb1433f2d25d149e014a1fc582febf12bb01ed

I can take once more a look on this issue, but I'm afraid I won't find time in the next 2 weeks. But if anyone else wants to build a PR it's fine for me.

[jshaughn]

This is also a problem for us on kiali.io. We moved to folding but actually that doesn't solve the problem, as even without scrolling the folded menus re-fold, likely due to a similar page refresh issue. Would love to see "sticky" behavior in either an expanded or folded left menu.

[huanlin]

FYI, I've post my solution here: https://github.com/google/docsy/issues/348#issuecomment-1671374715

[fekete-robert]

@huanlin 's solution worked for me.

[chalin]

I've added this to the 23Q3 milestone. I'll take a closer look after #1661 is addressed.

[roberthbailey]

This would be a really nice feature for a site with a long left-side TOC such as agones.dev

[prdsoftware]

I just upgraded to Docsy v10.0 and this still seems to be an issue. Is this ever going to fixed as part of the main code base, or do we have to implement the custom code as per this (edit...just tried this on Doscy v10, and that doesn't work either.)

[huanlin]

I just upgraded to Docsy v10.0 and this still seems to be an issue. Is this ever going to fixed as part of the main code base, or do we have to implement the custom code as per this (edit...just tried this on Doscy v10, and that doesn't work either.)

Hi @prdsoftware, is that custom code ever worked for your website on Docsy v.9.0? I'd like to confirm this because it worked for my website with Docsy v0.9.0.

[prdsoftware]

Hi, sorry, I didn't test it with 0.9.0. I went straight from 0.6.0 to 0.10.0.

[huanlin]

Hi, sorry, I didn't test it with 0.9.0. I went straight from 0.6.0 to 0.10.0.

@prdsoftware , No problem. I have a quick test with the fix on a website using Docsy v0.10.0, and it still works. It might be helpful if you can provide further details or links to your website's source code.

Maybe I'll submit a Pull Request for this issue.

[prdsoftware]

@huanlin Thanks for looking into this - appreciate your time.

Here's a link to the live docs. Open to a node that will scroll off-screen. You'll have to use the left-TOC to find it at the bottom. https://docs.helpmasterpro.com/docs/workflow/workflow-objects/milestones/

Git repo here: https://github.com/prdsoftware/HelpMaster-Documentation

[huanlin]

Here's a link to the live docs. Open to a node that will scroll off-screen. You'll have to use the left-TOC to find it at the bottom. https://docs.helpmasterpro.com/docs/workflow/workflow-objects/milestones/

Using Chrome DevTools, I couldn't find the fix on your website. Instead, I see this:

<body>
    ......
<script src='https://ap-northeast-2-029060369-view.menlosecurity.com/safeview-static/tc/2151/scripts/thin-client-min.js?v=2.90.0-120063-1-g7bf2b402ad' type='text/javascript'></script>
</body>

Are you using any other plugins or something that inject JS code to your pages? Because it seems the beforeunload event is intercepted by the JavaScript code shown as above.

[prdsoftware]

Thanks for checking it out. Not sure where that menlosecurity.com script is coming from. I don't see it when I examine the scripts. Are you sure it's not coming from your browser? I've tried several different browsers and cannot see this in the js.

I'm deploying via Netlify - maybe they have something to do with it?

When I compared your repo code with the code you originally posted here https://github.com/google/docsy/issues/348#issuecomment-1671374715, they are slightly different, so I updated to your repo code and deployed, but no difference unfortunately.

Seems like I'm doing something wrong...but I have no idea what.

[huanlin]

Thanks for checking it out. Not sure where that menlosecurity.com script is coming from. I don't see it when I examine the scripts. Are you sure it's not coming from your browser? I've tried several different browsers and cannot see this in the js.

Sorry! I think you're right. That line of code seems to come from the network environment in the building where I work. I'll check again at home after work.

[huanlin]

@prdsoftware , yoy can try this: modify config.toml and comment out the sidebar_cache_limit = 10 configuration.

[params.ui]
# Enable to show the side bar menu in its compact state.
sidebar_menu_foldable = true
sidebar_menu_compact = true
# sidebar_cache_limit = 10      # Comment out this line to avoid the scroll position issue. 

Note that it is just a workaround. I'll take a further look to see if there is a better way to fix the scrollbar issue.

[prdsoftware]

Success!! Thank you @huanlin. That worked after a browser cache refresh.

Rod

[huanlin]

I've implmented the fix and tested it on my website. Here is my Pull Request for review: Persist sidebar scroll position

Kindly shed some light if any suggestions. Thanks! (@chalin , @fekete-robert , @prdsoftware)