Skip to content

[Enhancement]: TOC lacks active section highlighting and auto-scroll  #53

Description

@Pranav-IIITM

Description

On the tutorial pages for example, The Basic Tools of the Deep Life Sciences, the right-hand sidebar containing the Table of Contents (TOC) for the current page has two usability issues:

  1. No Active Section Highlighting (Scrollspy): As the user scrolls through the main document, the TOC does not highlight or indicate which section is currently being read.
  2. No Auto-scrolling: The TOC does not scroll automatically to keep the active section in view or as the user progresses deep into the document.
Image

Enhancement

  • Active state: The section currently in the viewport on the main page should be highlighted in the right TOC ( a scrollspy feature).
  • Auto-scroll: The TOC should ideally scroll to ensure the currently active section remains visible within the sidebar.

Expected Outcome

It will look something like this (TOC on the right):

toc.highlighting.active.sections.mp4

Why it matters

Adding this would:

  • Make it easier for users to navigate long tutorials without losing their place.
  • Improve the overall usability and polish of the tutorials, which are often a new user's first hands-on introduction to DeepChem.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions