docsify icon indicating copy to clipboard operation
docsify copied to clipboard

Always scroll to clicked sidebar content

Open jhildenbiddle opened this issue 6 years ago • 8 comments

Docsify does not scroll to the clicked sidebar link content if the link was the last sidebar link clicked.

  1. Visit the Markdown section on the docsify-themeable site
  2. Click any section link (Ex: Code)
  3. Scroll the page
  4. Click the same section link

I believe the expectation is that docsify would scroll back to the section clicked.

Perhaps removing the hash from the URL, then updating it with the section hash would provide a quick fix?

jhildenbiddle avatar Jun 07 '18 03:06 jhildenbiddle

I think you are talking about this 🐛 https://github.com/QingWei-Li/docsify/issues/422, aren't you?

SidVal avatar Jun 07 '18 17:06 SidVal

The two issues are closely related, but the descriptions of how to proceed are different.

  • #422: Do stuff when I change the scroll position (update the sidebar and/or URL on page scroll)
  • #522: Change the scroll position when I do stuff (click an already active sidebar link)

I believe the fix for this issue is straightforward: when a user clicks a link in the sidebar, always scroll that content into view at the top of the viewport--even if it's the active link / URL. If a user clicks a sidebar link, then waits for the content to scroll into view, then scrolls 10 pixels, clicking the same sidebar link should scroll the content back 10px to the initial scroll position. That's it.

For #422, I agree that the sidebar should always reflect the current scroll position of the page: as the user scrolls, the active link in the sidebar should be highlighted in all scenarios. I do not , however, think the URL should be updated as the page is scrolled. Instead, the URL should be updated only when a user-initiated navigation action has occurred (i.e. clicking a sidebar link).

jhildenbiddle avatar Jun 07 '18 23:06 jhildenbiddle

+1 to this.

I can manual fix it creating links with full parameters in href value.

For example, if my first heading in a sample.md page is "01. Introduction", I could achieve page change and reset scroll position with this link:

[My Link](/sample.md?id=_01-introduction)

But it could be perfect that changing section always reset scroll position to the top, is natural behaviour when changing the main content.

A colateral issue with this approach appears when I attempt to replicate this behaviour on sidebar.md links, I get wrong subnavigation rendering (subnavigation is attached under main navigation item that is not the selected one).

qmarcos avatar Sep 12 '18 10:09 qmarcos

I think this has been fixed in develop.

anikethsaha avatar May 14 '20 16:05 anikethsaha

is there an update on this?

macrozone avatar Dec 29 '20 21:12 macrozone

hi, also checking if this has been fixed? seems like a bug that really hurts the UX .. is there a common/easy solution?

pkieltyka avatar Aug 21 '21 23:08 pkieltyka

Hey all, I believe this is the configuration parameter that is required to be changed from the default: https://docsify.js.org/#/configuration?id=auto2top

sifex avatar Sep 24 '21 04:09 sifex

Still seeing this bug. Even with config of auto2top=true set.

beth-panx avatar Feb 17 '22 00:02 beth-panx