使用锚点链接,跳转后被顶部导航遮挡部分解决办法

解决方案:

添加class,用padding调整锚点元素跳转后的位置,使用margin抵消padding对布局的影响。

padding会影响锚点元素的定位,margin不影响锚点元素的定位。

html 复制代码
 <a href="#one">1 </a>
<a href="#two"> 2</a>

<div id="one" class="question">
1
1
1
1
1
</div>
<div id="two" class="question">
2
2
2
2
2
</div>
css 复制代码
.question{
// 110px是导航栏高度 
  padding-top: 110px;
  margin-top: -110px;
}

注意:描点连接必须有滚动条,否则无效

相关推荐
leluckys16 分钟前
flutter 专题 六十八 Flutter 多图片上传
前端·javascript·flutter
Enti7c23 分钟前
数据一键导出为 Excel 文件
前端·javascript·excel·jquery
Jinuss24 分钟前
源码分析之Leaflet中control模块Zoom类实现原理
前端·leaflet
qiyue7727 分钟前
用claude3.7,不到1天写了一个工具小程序(11个工具6个游戏)
前端
Linruoxin33 分钟前
理解浏览器视口:为什么你的屏幕分辨率不直接决定网页的显示区域?
前端·css
乌恩大侠34 分钟前
AMD Versal™ AI Edge Series VEK280 Evaluation Kit
前端·人工智能·edge
七公子7741 分钟前
微信小程序常见问题记录合集
前端·微信小程序
the_one41 分钟前
🔥 纯CSS黑科技!仅用1个DIV实现3D立体选项卡
前端·css
逆袭的小黄鸭1 小时前
掌握 JavaScript:理解原型和原型链
前端·javascript·面试
患得患失9491 小时前
【前端】【tailwind】tailwind默认重置了样式
前端·tailwind