Skip to content

Fix TOC sidebar not scrolling to active item on page load#480

Merged
JC-DSIT merged 3 commits into
alphagov:mainfrom
d-a-v-e:fix-toc-scroll-to-active-item
May 18, 2026
Merged

Fix TOC sidebar not scrolling to active item on page load#480
JC-DSIT merged 3 commits into
alphagov:mainfrom
d-a-v-e:fix-toc-scroll-to-active-item

Conversation

@d-a-v-e
Copy link
Copy Markdown
Contributor

@d-a-v-e d-a-v-e commented May 1, 2026

Proposed changes

What changed

scrollTocToActiveItem() in _modules/in-page-navigation.js used jQuery's position().top to compute whether the active TOC item needed scrolling into view.

When called on initial page load (via handleInitialLoadEvent), the browser has not yet finished layout, so position().top returns 0 and the function silently exits without scrolling.

Two fixes:

  • Wrap the initial-load call in requestAnimationFrame so layout is complete before positions are read.
  • Replace the manual offset calculation with the browser-native scrollIntoView({ block: 'nearest', inline: 'nearest' }), which is simpler and handles all edge cases.

Also:

  • converts var to let/const throughout the file (as flagged by the linter)

Related issue or tracking reference

Screenshots or examples (if relevant)

Before

Screen.Recording.2026-04-23.at.15.34.28.mov

After

Screen.Recording.2026-04-23.at.15.36.24.mov

Checklist

  • the pull request has a clear title with a short description about the update in the documentation
  • GitHub actions all pass
  • you have tested the changes with a fresh build against the latest version of the tech-docs-gem
  • you have linked this PR to an issue (or explained why none exists)
  • you have updated documentation if needed

Comment thread lib/assets/javascripts/_modules/in-page-navigation.js Outdated
@JC-DSIT
Copy link
Copy Markdown
Contributor

JC-DSIT commented May 5, 2026

I don't think this fully solves the issues with the toc for all the ways the tech-docs can be structured, for example when using layouts to group items under the navigation menu.

It looks fine and I have tested on a couple of sites locally which all still run and work well, have added a small comment but would ideally like to see some testing added to prevent future breakages

You'll also need to up the release version and update the changelog

@d-a-v-e
Copy link
Copy Markdown
Contributor Author

d-a-v-e commented May 11, 2026

thanks for the Review @JC-DSIT - I've added some specs, do let me know if this looks sufficient and I can look at bumping versions + changelog (I assume in a separate PR?)

@JC-DSIT
Copy link
Copy Markdown
Contributor

JC-DSIT commented May 11, 2026

@d-a-v-e looks fine to me - no need to add the up version and changelog in a different PR I don't think?

I'll set the checks to run now and as long as they all pass then once there's a new version it should be fine to merge in 👍

@d-a-v-e d-a-v-e force-pushed the fix-toc-scroll-to-active-item branch from e1424c2 to efb2021 Compare May 18, 2026 09:10
Copy link
Copy Markdown
Contributor

@JC-DSIT JC-DSIT left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, looks good to me

@JC-DSIT JC-DSIT merged commit e19e17c into alphagov:main May 18, 2026
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: TOC scroll to active item

2 participants