点击登录,精彩内容等着你

HTML文档<a>标签锚点设置位移高度,适应页面头部固定导致锚点遮挡

全栈侠客

2022-09-17
leanboot文章是采用editormd进行markdown内容编辑,toc是文档目录的功能,当页面中有固定头部,锚点定位将被遮挡

问题描述

锚点定位被遮挡

锚点的定位原理:锚点的scrollTop的值的来定位,当具有固定头部,自然会被挡住

解决问题思路

  • 把锚点的高度top设定一定的值,让锚点显示位置,脱离【固定头部】的高度
  1. /**配置锚点距离顶部高度**/
  2. .text-content .reference-link {position: relative;top:-78px;}

或者

  1. <!-- 文章正文渲染 -->
  2. <div class="text-content markdown-body editormd-preview-container" th:utext="${vdata.content}">
  3. 文章详情
  4. </div>
  5. <!-- 锚点处理 top:的数值是距离顶部的距离-->
  6. <a name="home" style="position:relative;top:-78px;"></a>

解决后效果

阅读 1212     最后编辑 2022-09-26 18:49
文章补充
评论(0) 发表新评论
  • ...暂无评论...

我是有底线的 评论与点赞5分钟更新一次
回复评论
取消关闭

请先登录