Fix Markdown Footnote Jump Overlap With CSS Scroll-Margin-Top
Markdown footnotes and header anchors let readers jump to specific positions within a page. But when a blog has a fixed top navigation bar, the target content often ends up hidden underneath it after the jump.
Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the footnote content at the bottom of the page.
The HTML Structure in This Blog
To understand why the selectors in the solution look the way they do, it helps to first look at the actual HTML this blog generates.
Header Anchors
When you write a heading in Markdown:## My Heading
Hexo renders it as:<h2 id="my-heading"> <a class="header-anchor" href="#my-heading">#</a> My Heading</h2>
Notice that the id is on the <h2> itself, not on the inner <a>. The <a class="header-anchor"> is only the clickable # symbol.
Footnotes
The footnote reference in the body becomes:<sup class="footnote-ref"> <a href="#fn1" id="fnref1">[1]</a></sup>
The actual footnote at the bottom of the page is rendered as a list item:<li class="footnote-item" id="fn1"> <p>This is the first footnote.</p> <a class="footnote-backref" href="#fnref1">↩</a></li>
These are the exact elements the CSS selectors in the next section target.
The Solution
Set scroll-margin-top on every element that might become a jump target, leaving enough space for the fixed navbar:sup.footnote-ref > a,li.footnote-item,h2,h3,h4,h5,h6 { scroll-margin-top: 5rem;}
scroll-margin-top controls how much space to leave at the top when scrolling to an element. It only takes full effect when there is enough scrollable space. If the page content is short and the scroll distance is insufficient to reach the requested offset, the element may not appear exactly where expected.
Smooth Scrolling
You might be tempted to add smooth scrolling globally:html { scroll-behavior: smooth;}
This works, but be aware that it applies to all scrolls, including those triggered by user navigation (back/forward buttons, URL fragments). If you want smooth scrolling only for anchor jumps triggered by clicks within the page, apply it more selectively or use element.scrollIntoView({ behavior: 'smooth' }) in JavaScript.
评论