Blog页内跳转体验优化

最近写markdown比较爱用footnote^[1]，点击后可在网页中使用跳转。

MD

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%。

CSS

:target {    scroll-margin-top: 20vh;}

顺便可以加入下面的规则，在跳转过程中会添加过度动画

CSS

html {    scroll-behavior: smooth;}

---

1. 脚注使您可以添加注释和参考，而不会使文档正文混乱。当您创建脚注时，带有脚注的上标数字会出现在您添加脚注参考的位置。读者可以单击链接以跳至页面底部的脚注内容。Markdown 脚注 | Markdown 教程 ↩︎

2. The :target CSS 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 ↩︎