背景

在查阅一些文档的时候，一些比较优秀博客在文章中是带有目录的，点击就会跳转到指定的锚点。

在本人的某些文章中，也想尝试这样的效果。

做法

实现这样的效果有2种做法（不同之处在于 超链接的写法不同），都是一个锚点+ N个调整连接即可

  • 基于html语法
  • 基于markdown语法

html 语法

<a href="#锚点1">点击这里跳转到锚点1</a>

<a href="#锚点名2">点击这里跳转到锚点2</a>

<a id="锚点1">标题1，作为锚点1</a>

效果

点击这里跳转到锚点1

点击这里跳转到锚点2

标题1，作为锚点1

markdown 语法

写法



[点击这里跳转到锚点2](#锚点名2)

<a id="锚点名2">标题2，作为锚点2</a>

效果

点击这里跳转到锚点2

标题2，作为锚点2

Markdown 文章 跳转的更多相关文章

  1. 使用 VS Code 来编辑 markdown 文章

    一开始我就用 VS Code 来编辑 markdown 文本,只是因为 VS Code 用起来感觉很好,然后我又去寻找其他的能够预览 markdown 的编辑器,看了好多都不是很方便.突然我发现 VS ...

  2. 第 10 篇：小细节 Markdown 文章自动生成目录，提升阅读体验

    目录 在文中插入目录 在页面的任何地方插入目录 处理空目录 美化标题的锚点 URL 作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 上 ...

  3. 解放双手，markdown文章神器,Typora+PicGo+七牛云图床实现自动上传图片

    本文主要分享使用Typora作为Markdown编辑器,PicGo为上传图片工具,使用七牛云做存储来解放双手实现图片的自动化上传与管理.提高写作效率,提升逼格.用过 Markdown 的朋友一定会深深 ...

  4. IOS微信中看文章跳转页面后点击返回无效

    经过查找原因发现,下面两种链接,链接1返回不了,链接2可以返回. 链接1:http://mp.weixin.qq.com/s?__biz=MzA5NDY5MzcyNA==&mid=265089 ...

  5. Markdown博文快速转为微信文章

    介绍 技术博文在CSDN上,全是Markdown格式,最近看各位大佬又是个人网站又是个人微信公众号,突然发现: "个人博客小站 + 个人微信公众号 + CSDN + 掘金+ - = 程序员标 ...

  6. 用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写

    说明 结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的<用weexplus从0到1写一个app>系列文章.写这篇文章的时候,weexplus的作者已经把w ...

  7. Markdown 完全指南

    概述 Markdown 是一种用于网络文本书写的轻量级标记语言,广泛用于个人 blog.github.wiki 中.其实浏览器并不能识别 Markdown 的语法,但许多 blog.wiki 平台以及 ...

  8. Typora 和 markdown

    目录 Typora 和 markdown Typora 简单介绍 markdown语法 导出 Typora 和 markdown Typora 简单介绍 支持markdown的一款优雅的编辑器. 绿色 ...

  9. Python + Selenium 自动发布文章（一）：开源中国

    https://blog.csdn.net/qq_28804275/article/details/80891949 https://blog.csdn.net/qq_28804275/article ...

  10. markdown编辑器typora本地图片上传到自己的服务器

    typora是windows平台下最受欢迎的markdown书写工具和查看工具,本篇文章将会介绍如何在typora平台使用java脚本程序自动上传本地图片到自己的服务器,从而让markdown文章中的 ...

随机推荐

  1. 通俗易懂的生产环境Web应用架构介绍

    前言 看见一篇非常通俗易懂且适合新手阅读的Web应用架构文章,我将其手工翻译了出来,分享给大家. 也可以去阅读英文原文,标题为,贴出链接: https://stephenmann.io/post/wh ...

  2. rubymineIDE配置启动

    debug启动 debug启动 安装插件 报错: 网络问题 下载 ruby-debug-ide-2.3.1 解压到 /home/haima/.rvm/gems/ruby-2.3.8/gems/

  3. ssh秘钥对免密码登陆

    准备两台linux服务器 a和b , 在a上使用ssh命令登陆b服务器 , 并且不用 输入密码 1.在a服务器上,比如是root用户 ,进去/root/.ssh目录 ,没有就创建, 就是进入家目录的. ...

  4. Vue3 echarts 组件化使用 resizeObserver

    点击查看代码 const resizeObserver = ref(null); //进行初始化和监听窗口变化 onMounted(async () => { await nextTick(() ...

  5. 动态规划-DP 完整版

    动态规划 学完了五大基础dp 做个简单总结 dp特征 动态规划问题 首要是找到做题的目的 是求最大/小值 还是其他: 其二 要确定问题的状态转移方程 这是关键: 第三 为dp数组找到边界. 最后 检查 ...

  6. JDK源码阅读-------自学笔记(十八)(java.lang.Enum枚举类)

    枚举类简介 如果有必要定义一组常量的时候使用 所有的枚举类型隐性地继承自 java.lang.Enum,枚举实质上还是类. 每一个枚举中的成员,就相当于枚举的一个对象,默认都是public stati ...

  7. C 编程异常 — double free or corruption (fasttop)

    问题:运行代码的时候程序崩溃. *** Error in `./parsing': double free or corruption (fasttop): 0x00000000023d2350 ** ...

  8. mongodb的replication与shard分片结合使用详解

    部署脚本 #!/bin/bash #复制集配置 IP='10.0.0.12' #主机ip NA='rs3' #复制集名称 if [ "$1" = "reset" ...

  9. webapi动态创建后台任务（使用排队的后台任务）

    很多时候我们都会使用后台定时任务,但有些任务不需要定时执行,只需要请求到来时执行一次,比如请求服务器到某个地方同步数据,但请求不需要等数据同步完成再响应.这时候就可以使用排队的后台任务. 基本原理是用 ...

  10. 使用jsbarcode生成条形码

    安装 yarn add jsbarcode 使用 // HTMLElement 承载条形码的元素 svg/canvas // text 显示在条形码下方的文字 // option 条形码的配置项 具体 ...