doc: add scroll margin to links

[silverwind]

Before: Opening a section link like this one would hide the section title behind the sticky stability header:

After: Page scroll is offset by 50px so the section header is visible:

The value change is undone below 600px where it is not an issue because the page header is not sticky.

[nodejs-github-bot]

Review requested:

• @nodejs/nodejs-website

[avivkeller]

No port needed, the change causing this has not been ported.

[silverwind]

One issue: Links in sections without sticky stability header like this one are incorrectly offset. This is likely tricky to fix in CSS, but I will try.

[AugustinMauroy]

LGMT !

[silverwind]

Fixed that issue, seems to work everywhere now. It only offsets the scroll on pages where there is a module-level stability header (outside the <section> elements).

[dario-piotrowicz]

this means that every single a of every single page that has an api stability banner will receive the scroll-margin-top attribute.... is that correct? cause the comment above suggests to me that this is only specific for headers? 🤔

[silverwind]

It means every page that has a top-level stability banner. The docs HTML layout is like this:

<div id="apicontent">
  <div class="api-stability"></div>
  <a></a>
  <section>
    <div class="api-stability"></div>
    <a></a>
  </section>
</div>

On some pages like the errors page, the first api-stability is missing, so it won't work on the section stabilities there, for example https://nodejs.org/api/errors.html#err_cpu_usage.

Honestly I think this is not completely solveable from CSS and would prefer if the sticky headers would be removed. This is a best-effort solution that should work in 99% of cases. I hear the docs will be re-written so maybe this is fine as an interim solution.