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

解决方案:

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

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

相关推荐
中杯可乐多加冰14 分钟前
基于 DeepSeek + MateChat 的证券智能投顾技术实践:打造金融领域的专属大Q模型助手
前端·人工智能
凡人程序员14 分钟前
搭建简易版monorepo + turborepo
前端·javascript
丸子哥哥15 分钟前
同一个域名,如何添加多个网站?
服务器·前端·nginx·微服务
不努力也不会混15 分钟前
vite联邦实现微前端(vite-plugin-federation)
前端·vue.js
伍亿伍千万17 分钟前
Uptime Kuma修改作为内嵌页面的自适应
前端
Heo19 分钟前
原来Webpack在大厂中这样进行性能优化!
前端·javascript·vue.js
涔溪20 分钟前
Vue2 项目中通过封装 axios 来同时连接两个不同的后端服务器
前端·vue.js·axios
Codebee32 分钟前
SOLO+OODER全栈框架:图生代码与组件化重构实战指南
前端·人工智能
颜酱33 分钟前
CLI 工具开发的常用包对比和介绍
前端·javascript·node.js
Chen不旧41 分钟前
关于用户权限的设计,前端和后端都需要考虑
前端·权限