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

解决方案:

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

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

相关推荐
问心无愧051343 分钟前
ctf show web入门160 161
前端·笔记
李小白661 小时前
第四天-WEB服务器基本原理,IIS服务
运维·服务器·前端
humcomm2 小时前
AI编程时代新前端职位
前端·ai编程
好家伙VCC2 小时前
Web Components主题热切换方案揭秘
java·前端
甲维斯2 小时前
Kimi版超级玛丽效果“惊人”,配额不足5厘米!
前端·人工智能
hboot2 小时前
AI工程师第一课 - Python
前端·后端·python
凉菜凉凉2 小时前
AI时代,被抛弃的前端
前端·ai
console.log('npc')3 小时前
AI前端工程与生成式UI学习路线
前端·人工智能·ui
梦曦i3 小时前
uni-router v1.1.1发布:守卫超时保护+路由监听
前端·uni-app
qq_2518364573 小时前
基于java Web网络订餐系统设计与实现 源码文档
java·开发语言·前端