HTML中a标签锚点定位偏移距离定位顶部一段位移 适配导航固定站点

HTML中a标签锚点定位偏移距离定位顶部一段位移 适配导航固定站点

浏览次数:
作者: 墨鱼
信息来源: 本站原创
更新日期: 2021-04-23 22:52:57
文章简介

HTML中a标签的锚点定位可通过调整偏移距离实现精准跳转,确保内容定位至顶部特定位置。此优化方案尤其适用于导航固定站点,提升用户体验,使页面跳转更加流畅自然。

  • 正文开始
  • 相关阅读
  • 推荐作品

1.当界面需要fixed固定的标题栏时,点击对应的标题,a标签中的href就会链接到对应的内容段落里
2.标题栏随界面一直跟随,具有高度nav,在锚点定位中就会计算上nav的高度,导致被nav标题栏覆盖在下面
3.那么可以在需要跳转到的div里面加上一个暗锚,并定位到距离顶端的负距离值top(nav高度),在定位到暗锚时,就会自动空出一段距离了。

4.下面是代码部分
(1)nav标题栏:

<a href="#index" class="font-title font-active">首页</a>
<a href="#about-us" class="font-title">关于我们</a>
<a href="#btn-download" class="font-title">下载</a>


(2)跳转到的div部分以及暗锚

<div class="main-description">
  <!-- 跳转关于我们锚点-->
    <a name="about-us" style="position: relative;top: -80px;"></a>
 </div>


 

通过JS判断浏览器语言后跳转到对应语言(中文和英文)站点
« 上一篇 2020年11月24日
帝国CMS页面禁止保存图片、禁止复制文字、禁止F12开发者模式
下一篇 » 2021年06月02日

如本文对您有帮助,就请墨鱼抽根烟吧!