Scroll to selection on sidebar when visiting with a direct link

stavros-k commented 2 years ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[ ] I have tried the npm run clear or yarn clear command.
[ ] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[ ] I have tried creating a repro with https://new.docusaurus.io.
[ ] I have read the console error message carefully (if applicable).

Description

When there is a long list of items in side bar, when you visit an item via a direct link, it should scroll the sidebar to the selected item.

Example: Visit this link https://truecharts.org/docs/charts/stable/plex

A user won't know that there are 2 sub items there, until scrolls down to the said item.

It should also scroll to the selection if visit that item from a search result as well

This is probably a feature request, but I cannot login to the Canny board. Either by gh oath or by mail. It shows error 400 on the console

Reproducible demo

No response

Steps to reproduce

Visit this link https://truecharts.org/docs/charts/stable/plex
Sidebar should scroll to the plex item.
Sidebar stays at the top

Expected behavior

Sidebar should scroll to the plex item

Actual behavior

Sidebar stays to the top

Your environment

Public source code: https://github.com/truecharts/website
Public site URL: https://truecharts.org
Docusaurus version used: 2.0.1
Environment name and version (e.g. Chrome 89, Node.js 16.4): gh-pages
Operating system and version (e.g. Ubuntu 20.04.2 LTS): gh-pages

Self-service

[ ] I'd be willing to fix this bug myself.

Josh-Cena commented 2 years ago

Last time we turned on autoscrolling for the TOC, it opened a can of worms and was eventually reverted. I'm not confident to say that this would work, but I don't think it hurts to try.

stavros-k commented 2 years ago

Last time we turned on autoscrolling for the TOC, it opened a can of worms and was eventually reverted. I'm not confident to say that this would work, but I don't think it hurts to try.

By just uncommenting the line, it didn't work. Didn't looked into it much tho.

Isn't it also supposed to work for ToC only? Or that affects the sidebar also?

Josh-Cena commented 2 years ago

No—the two are independent. I'm saying the entire thing about autoscrolling is likely not going to work on some platforms. We need to experiment.

stavros-k commented 2 years ago

No—the two are independent. I'm saying the entire thing about autoscrolling is likely not going to work on some platforms. We need to experiment.

I see, thanks for clearing that up!

bentookey-yotta commented 1 year ago

Can confirm this still an issue on Docusaurus v2.4.1. The sidebar correctly highlights the active doc but it appears offscreen vertically at 1080p. I would expect it to autoscroll to the active doc.

Original example URL is dead so here's a new one: https://developer.redis.com/howtos/moviesdatabase/sampleapp/

This website (Jekyll-based I believe) demonstrates the expected behaviour: https://www.sketch.com/docs/sharing-and-permissions/permissions-directory/

oh-t2med commented 3 months ago

@bentookey-yotta , how did you solve this on your site?

bentookey-yotta commented 3 months ago

We haven't! The issue is still present in Docusaurus v3.4.0. As all the links seem dead or changed, here's another example for the thread.

While the doc is highlighted correctly in the sidebar, the sidebar doesn't scroll to its position, so it remains offscreen.

oh-t2med commented 3 months ago

Thank you very much for your answer. It seemed to work on your site as I followed the link, but I just had the complete TOC on the screen.

I found some additional info in this thread: https://github.com/facebook/docusaurus/issues/823 Maybe the featured script will work.

facebook / docusaurus