背景

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

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

做法

实现这样的效果有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. 面试官：素有Java锁王称号的‘StampedLock’你知道吗？我：这什么鬼？

    一.写在开头 我们在上一篇写ReentrantReadWriteLock读写锁的末尾留了一个小坑,那就是读写锁因为写锁的悲观性,会导致 "写饥饿",这样一来会大大的降低读写效率,而 ...

  2. Educational Codeforces Round 160 (Rated for Div. 2)

    A 直接模拟,注意细节 #include<bits/stdc++.h> #define ll long long using namespace std; ll p[15] = {1}; ...

  3. 《最新出炉》系列入门篇-Python+Playwright自动化测试-43-分页测试

    1.简介 分页测试,这种一般都是公共的方法系统中都写好了,这种一般出现是数据展示比较多的时候,会采取分页的方法,而且比较固定,一般是没有问题的,因此它非常适合自动化测试,但是如何使用playwrigh ...

  4. 删除字符串A中与字符串B相同的字符

    /** * file name:DelDestChar.c * author : liaojx2016@126.com * date : 2024-05-06 * function : Delete ...

  5. 扩展Unity编辑器顶部Toolbar，增加自定义按钮

    游戏需要增加几种启动模式,要在编辑器顶部Toolbar处增加几个按钮:进行下扩展. 这部分Unity没有直接提供接口,需通过反射实现.看了下有一个开源库: https://github.com/mar ...

  6. Gradle常用功能拾掇

    介绍 Gradle 是一个基于groovy动态语言的java项目管理工具,灵活性和速度好于java,他的build脚本完全可以以写groovy代码的方式来实现,所以灵活性很高,当然也就比maven的x ...

  7. flask-wtf和WTForms官网翻译详解

    https://flask-wtf.readthedocs.io/en/stable/# https://wtforms.readthedocs.io/en/2.3.x/ 介绍: wtformflas ...

  8. vue我自己的动态菜单思路

    1.在router里把所有的路由都加上. 2.后端存储路由path和其他设计需要的信息. 3.登录后,后端返回菜单树,根据权限不同,返回的菜单不同,并且还要返回每个path代表的页面具有的权限数组.可 ...

  9. WPF中 x:Name和Name的区别

    x:Name 唯一地标识 XAML 定义的对象,以便于从代码隐藏或通用代码中访问对象图中实例化的对象.x:Name 一旦应用于支持编程模型,便可被视为与由构造函数返回的用于保存对象引用或实例的变量等效 ...

  10. 音视频学习--H264解析渲染

    一.H264文件获取 下载一段MP4文件,通过FFMPEG转换成MP4 ffmpeg -i Gravity.mp4 -vcodec h264 out_2.264 二.通过解析H264成帧,然后刷新 这 ...