背景

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

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

做法

实现这样的效果有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. Codeforces 题解集

    Codeforces Round 940 (Div. 2) and CodeCraft-23 Codeforces Round 940 (Div. 2) and CodeCraft-23 (A-E)

  2. python3解析FreeSWITCH会议室列表信息

    操作系统 :CentOS 7.6_x64 FreeSWITCH版本 :1.10.9 Python版本:3.9.12 进行FreeSWITCH会议室相关功能开发过程中,会遇到需要解析会议室列表信息并进行 ...

  3. 简说python之批量操作主机

    目录 Python批量操作主机 安装paramiko模块 远程ssh控制主机 目前,很多的工作都是批量的操作Linux主机.通过python脚本,封装Linux的shell命令.保证批量操作,简易优化 ...

  4. 为什么需要学习ITSM/ITIL

    假如你需要管理一个超过20人的IT服务组织,一般会面临以下问题: 人多事杂活重,每个人都很累,工作却还是一团糟糕, 用户方怨声载道,领导也颇有微词,同事间也经常互相甩锅埋坑, 工作只是救火或者混日子, ...

  5. Go pprof 认知到实践

    快速开始 测试环境:go version go1.22.2 windows/amd64,源代码开源在 https://github.com/oldme-git/teach-study/tree/mas ...

  6. 在项目中使用UEditor碰到的几个问题

    1.文本编辑器的下拉框无法使用.即选择字号字体的下拉选择框无法使用. 通过调试,发现不是编辑器的下拉框没有出来,而是下拉框显示在弹出框的底部,猜测是否和z-index属性有关. 产生这个问题的原因是文 ...

  7. 关于UE4对象静态/动态的销毁问题整理(AddToRoot、TWeakObjectPtr)

    1.非UObject对象 即非UObject常规C++对象,创建销毁不赘述.但可以用智能指针:从而不用关心销毁逻辑: TSharedPtr<ClassA> MyObj = MakeShar ...

  8. C语言：Hello Word（梦开始的地方）

    #include <stdio.h>//标准输入输出头文件,下面的printf打印的函数包含在这个头文件里面 int main() { printf("Hello Word!&q ...

  9. 在 ThinkPad E470 上安装 Ubuntu 16.04 无线网卡驱动

    目录 文章目录 目录 安装 安装 # 查看无线网卡驱动类型,E470 一般为 RTL8821CE lspci # 安装必要工具 sudo apt-get install build-essential ...

  10. vue3:modal组件开发

    项目环境 @vue/cli 4.5.8 最终效果 需求分析 显示/隐藏 点击遮罩层能否关闭 宽度和zIndex自定义 标题栏 -显示标题和关闭按钮 主体 底部 -内置取消和确定功能 前置知识 tele ...