MarkDown 高阶操作——使用 span 标签构建页内自由跳转目录

以下是使用<span>标签构建页内自由跳转目录效果：

• CSDN/有道云笔记/GitHub的Markdown编辑器亲测都可使用。
• CSDN 做了动画优化，点击效果会比较顺滑。
• 源代码附在文末。

目录

• 一级标题01
  • 二级标题01-01
    • 三级标题01-01-01
    • 三级标题01-01-02
  • 二级标题01-02

一级标题01

跳转到目录 >>> 一级标题01
内容
内容
内容
内容

二级标题01-01

跳转到目录 >>>一级标题01 >>> 级标题01-01

内容
内容
内容
内容
内容
内容

三级标题01-01-01

跳转到目录 >>>一级标题01 >>> 级标题01-01>>> 三级标题01-01-01

内容
内容
内容
内容
内容
内容

三级标题01-01-02

跳转到目录 >>>一级标题01 >>> 级标题01-01>>> 三级标题01-01-02

内容
内容
内容
内容

二级标题01-02

跳转到目录 >>>一级标题01 >>> 二级标题01-02
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容

以下为源代码如下

<span id = "catelog">目录</span>
- <span id = "h1-01">一级标题01</span>
	- <span id = "h2-01-01">二级标题01-01</span>
		- <span id = "h3-01-01-01">三级标题01-01-01</span>
		- <span id = "h3-01-01-02">三级标题01-01-02</span>
	- <span id = "h2-01-02">二级标题01-02</span>
# 一级标题01
> 跳转到[目录](#catelog) >>> [一级标题01](#h1-01)
内容
内容
内容
内容
## 二级标题01-01
> 跳转到[目录](#catelog) >>>[一级标题01](#h1-01) >>> [级标题01-01](#h2-01-01)

内容
内容
内容
内容
内容
内容
### 三级标题01-01-01
> 跳转到[目录](#catelog) >>>[一级标题01](#h1-01) >>> [级标题01-01](#h2-01-01)>>> [三级标题01-01-01](#h3-01-01-01)

内容
内容
内容
内容
内容
内容
### 三级标题01-01-02
> 跳转到[目录](#catelog) >>>[一级标题01](#h1-01) >>> [级标题01-01](#h2-01-01)>>> [三级标题01-01-02](#h3-01-01-02)

内容
内容
内容
内容
## 二级标题01-02
> 跳转到[目录](#catelog) >>>[一级标题01](#h1-01) >>> [二级标题01-02](#h2-01-02)
内容
内容
内容
内容
内容
内容
内容
内容
内容
内容