Skip to content

doc: add scroll margin to links #58982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 10, 2025
Merged

doc: add scroll margin to links #58982

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b45b063
doc: add scroll margin to links
silverwind Jul 7, 2025
508f941
fix issue on pages without module-level stability
silverwind Jul 7, 2025
a23b371
adjust comment
silverwind Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions doc/api_assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,6 +373,11 @@ p {
padding-bottom: 2rem;
}

/* prevent the module-level sticky stability header from overlapping the section headers when clicked */
#apicontent:has(> .api_stability) a {
Copy link
Member

@dario-piotrowicz dario-piotrowicz Jul 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

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? 🤔

Copy link
Contributor Author

@silverwind silverwind Jul 8, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

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.

scroll-margin-top: 50px;
}

table {
border-collapse: collapse;
margin: 0 0 1.5rem;
Expand Down Expand Up @@ -837,6 +842,9 @@ kbd {
.api_stability {
top: 0;
}
#apicontent a {
scroll-margin-top: 0;
}
}

@media not screen, (max-height: 1000px) {
Expand Down
Loading