实现在文章下 锚点跳转到标题的功能

  本文介绍下我在实现文章锚点过程中的思路、遇到的问题和解决方法

最终实现效果如下:

 

单纯用前端来实现是很简单的,我用的是AntDesignVue的Anchor组件,拷贝Demo代码就能看到Anchor的实现效果。

贴个Demo的代码

从代码中可以轻易发现,锚点是由多个组成的,titile指显示的值,href指需要跳转到的页面元素的id值。

也就是说要实现点击锚点跳转到指定的标题,需要给指定 href、并且页面元素中得有这个id。

 

讲完了上面这些,下面来看下我在项目中是如何实现 解析和处理文章内容、动态生成锚点的

思路:

实现在文章下 锚点跳转到标题的功能_第1张图片

 

 

 按照这个流程下来是能实现锚点跳转的。我之前是卡在了后台文章上传时没有对

标签动态追加id,导致锚点无法匹配到页面中对应Id的

标签。

贴一个js操作dom给h1追加id的代码

实现在文章下 锚点跳转到标题的功能_第2张图片

 

 

 实现在文章下 锚点跳转到标题的功能_第3张图片

 

 

 

 

 前台文章展示

正则解析h1作为锚点内容

实现在文章下 锚点跳转到标题的功能_第4张图片

 

 根据数据进行页面渲染:

 

你可能感兴趣的:(实现在文章下 锚点跳转到标题的功能)