iterative / iterative/gatsby-theme-iterative

Add scroll margin to anchor targets that need it

Open
#142 0 comments 0 reactions 0 assignees View on GitHub
p2-nice-to-have
Dominant language
JavaScript
Stars
6
Forks
2
PR merge metrics
No merged PRs in 30d

Description

> scroll-pt-top on the body makes up for the sticky header exactly, and elements that want to have a little extra space can set scroll-mt to be used in addition.

> Nice addition. I think we can add them to other linkers as well like `details link`, `args link` etc which also provide hash links beside headers.

_Originally posted by @yathomasi in https://github.com/iterative/gatsby-theme-iterative/pull/140#discussion_r1035540691_

That PR added `scroll-margin` to docs headings, meaning that when navigated to via anchor (e.g. `href="#heading-id"`) the docs headings will have some extra space above them instead of hugging the navbar. This Issue tracks adding `scroll-margin` to other elements throughout the site that would benefit the same way.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by locating the existing scroll-margin behavior for documentation headings, then inspect the other hash-link providers mentioned in the issue, including details and args links. Apply the same anchor-spacing expectation to elements that need it and verify that navigation to their hash links leaves space below the sticky header.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.