优快云-markdown 页间跳转（锚点链接）的实现

最新推荐文章于 2025-03-24 06:06:28 发布

ThitherShore

最新推荐文章于 2025-03-24 06:06:28 发布

阅读量2.4w

点赞数 14

分类专栏： markdown 文章标签： markdown 锚点链接页面跳转

本文链接：https://blog.youkuaiyun.com/thither_shore/article/details/52206016

版权

8 篇文章

订阅专栏

　　锚点链接，也称作“锚点”。通过点击命名锚点，浏览器能够快速重定向网页特定的位置，跳转到该锚点所定位置（比如快速到页首、页尾或者网页中某处）。本文举例讲解优快云-markdown 通过 id 属性实现：

　　页内跳转：例如，一个很长的页面最下方有一个“返回页首”的按钮，就是一种最典型的页内锚点链接；
　　页间跳转：另外，测试发现优快云-markdown 支持页面间跳转，即锚点链接可指向非本页面中的位置。

实现方法

首先，要定义想让锚点去指定的位置标记（即这行代码： <div id="footer"></div>)，其中“footer”只是自己设定的该位置名称，可以随意修改。

其次，将定义好的位置标记放到要跳转到的地方。然后把锚点链接（即#footer）用像插入网页链接一样方式放在任意地方，当点击这个锚点链接（跳转链接）时就会跳到位置标记所在的位置。

实现案例

<div id="Mark"></div>这句话定义了锚点所指定的位置标记，名字为“Mark”.
[这句话是想要跳转到Mark处的锚点链接，点击即会跳转](#Mark).

实现效果

这句话定义了锚点所指定的位置标记，名字为“Mark”.
这句话是想要跳转到Mark处的锚点链接，点击即会跳转.

实现方法
　　方法类型页内跳转，先定义位置标记，再设置锚点链接。区别仅仅在于位置标记定义的书写在别的页面文本中操作，锚点链接的书写要添上要跳转到的页面的链接。

实现案例

这时位置标记<div id="Inter-Page"></div>写在了博文【PGM】概率图模型: Coursera课程资源分享和简介中，位置名称为“Inter-Page”，在如下方截图所示的位置处。

截图：位置标记所在位置说明

这时锚点链接的书写要添上要跳转到的页面的链接，再加”/#位置标记名称”，即本例中的”/#Inter-Page”. 由于上述博文地址为 http://blog.youkuaiyun.com/thither_shore/article/details/5218575，故写作

[现在点击此链接，可实现页间跳转](http://blog.youkuaiyun.com/thither_shore/article/details/52185758/#Inter-Page)

实现效果

现在点击此链接，可实现页间跳转

注：其实很多html标签都可以用来定义位置标识，重点在于利用的是该标签的“id”属性。

比如当我想定义名为way1, way2和way3这三个位置标识时，用div，span或a均可.

<div id="way1"></div>
<span id="way2"></span>
<a id="way3"></a>