[jdocs] Add scroll-padding-top value to Joomla template to allow for fixed header

[particthistle]

Problem Description

When navigating JDocs, if you click on the TOC navigation, the page will scroll to the heading, but the

This behaviour occurs across all Joomla official websites, though #bookmark links are not as common as in JDOCS - an example: https://www.joomla.org/core-features.html#features should jump to Joomla's Core Features heading, but the heading positions itself under the sticky toolbar.

Proposed Solution

Based on the solution here: https://stackoverflow.com/a/56467997/2586069
Explained further here: https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

Add a value for scoll-padding-top: 100px to the html class in the Joomla template to pad the scroll position so the location being scrolled to is visible on the screen, and not hidden under the header.

html {
  scroll-padding-top: 100px; /* height of sticky header on Joomla template */
}

Behaviour before applying the change

Behaviour after applying the change

Adding this via code inspector then produces the effect shown in the next animation.

html {
  scroll-padding-top: 100px; /* height of sticky header on Joomla template */
}

[conconnl]

Thanks, I can confirm the behavior and solutions.
Issue created in the private JDotOrgTemplate, so it can be added to the template before a new release.