HTML锚点定位的一些感受

基本语法

创建锚点

<a id="标题一" class="anchor"></a>

创建跳转连接 其中href 填写锚点的id

<a href="rootUrl + '#标题一'">到标题</a>

存在问题

一般我们的锚点跳转会直接将锚点置于视窗的最顶部,也就是说锚点的上顶点会与视窗顶部重合。如果这时候我们顶部有固定元素(比如导航之类的),锚点标题就会被遮挡。
为了解决这问题,我们可以使用伪类befor来为锚点标签添加高度以消除固定元素的遮挡部分。

.anchor::before{
    display: block;
    height: 6rem;
    margin-top: -6rem;
    visibility: hidden;
    content: "";
}

具体在于使用margin-top:-6rem来消除高度 a 标签高度的增加对于布局的影响。一定要与height的值为相反数,这样就不会影响之前的布局

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,645评论 25 708
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,380评论 0 7
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,019评论 3 119
  • 从前有一只邪恶,卑鄙,阴险的天鹅,将蛋放入了鸭窝。它想让它的孩子,在光怀的影响下,成为最优秀的…… 而我的这个故事...
    腐朽的灵魂阅读 252评论 0 1