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

解决方案:

添加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;
}

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

相关推荐
Code小翊5 分钟前
TypeScript 核心语法速查
前端·javascript·typescript
家里有只小肥猫6 分钟前
uniApp下拉渐变头部 拿来即用
前端·javascript·uni-app
一起养小猫7 分钟前
Flutter for OpenHarmony 实战:科学计算器完整开发指南
android·前端·flutter·游戏·harmonyos
Jinuss7 分钟前
源码分析之React中Scheduler调度器的任务优先级
前端·react.js·前端框架
波波00716 分钟前
每日一题:在 .NET 中遍历集合(如 List<T>、数组、字典)的过程中进行增删改查会不会有影响?可能引发哪些问题?实际开发中应如何避免?
前端·list
念念不忘 必有回响25 分钟前
码云流水线前端资源传输至目标服务器
运维·服务器·前端
我是伪码农33 分钟前
Vue 2.2
前端·javascript·vue.js
时光追逐者1 小时前
一个基于 .NET + Vue 实现的通用权限管理平台(RBAC模式),前后端分离模式,开箱即用!
前端·vue.js·c#·.net·.net core
Aotman_1 小时前
Vue el-table 表尾合计行
前端·javascript·vue.js·elementui·前端框架·ecmascript
Smart-Space1 小时前
cpphtmlbuilder-c++灵活构造html
c++·html