Fix Markdown Footnote Jump Overlap With CSS Scroll-Margin-Top
最近写markdown比较爱用footnote[1]，点击后可在网页中使用跳转。但跳转后内容经常被博客顶部的固定导航栏遮挡住，无法看到跳转后的内容。本文记录优化方案
Here's a simple footnote,[^1] and here's a longer one.[^bignote][^1]: This is the first footnote.[^bignote]: Here's one with multiple paragraphs and code. Indent paragraphs to include them in the footnote. `{ my code }` Add as many paragraphs as you like.Solution
为 :target[2] 选择器添加如下规则即可；其中 scrool-margin-top 用于设置目标元素在跳转后距离视口顶部的距离，这里使用 vh 单位，表示视口高度的百分比，20vh 即视口高度的20%。:target { scroll-margin-top: 20vh;}
scroll-margin-top 只在有足够滚动空间时才能完全生效。如果页面内容较短，滚动距离不足以达到设定的 20vh 偏移，元素可能不会完全按照预期位置显示。
MISC
顺便可以加入下面的规则，设置 scroll-behavior [3] 在跳转过程中会添加过渡动画html { scroll-behavior: smooth;}
脚注使您可以添加注释和参考，而不会使文档正文混乱。当您创建脚注时，带有脚注的上标数字会出现在您添加脚注参考的位置。读者可以单击链接以跳至页面底部的脚注内容。Markdown 脚注 | Markdown 教程 ↩︎
The
:targetCSS pseudo-class selects the target element of the document. When the document is loaded, the target element is derived using the document’s URL fragment identifier. :target - CSS | MDN ↩︎he
scroll-behaviorCSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs. scroll-behavior - CSS | MDN ↩︎
Fix Markdown Footnote Jump Overlap With CSS Scroll-Margin-Top