Scrolling issues when content is paged

Created on 2 May 2022, over 2 years ago
Updated 13 September 2024, 2 months ago

Problem/Motivation

The navigation through sections is inconsistent. Clicking on an H2 link in the Table of Content (ToC) does not always take you to the correct focus point in the HTML.

Steps to reproduce

Scenario 1 (double clicking)

1. View content in the ?paged mode, so only 1 section under a particular H2 header is visible on a page
2. Scroll down and click Section N (not first H2) in the ToC that includes H3 headers as well
3. That section of the ToC expands, but the focus in the main body of the page does NOT shift to that H2 heading
4. Clicking again on that H2 link in the ToC will then take the focus to the correct part of the document.

Scenario 2 (clicking on the last H3)

1. View content in the ?paged mode, so only 1 section under a particular H2 header is visible on a page
2. Scroll down and click Section N (not first H2) in the table of content that includes several H3 headers
3. Click on the last H3 header in that section in the ToC. It will take the focus to the correct part of the document
4. Click on the next H2 section. The focus in main body shifts somewhere but NOT to the expected H2.

Proposed resolution

Change function setActive() in toc.js to add scrolling after removing class="active" from one section and adding it to an another section, then scroll to the top of a page by hash.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇳🇿New Zealand tatianag

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024