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

解决方案:

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

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

相关推荐
倚肆7 小时前
CSS 动画与变换属性详解
前端·css
blackorbird7 小时前
谷歌 Chrome 浏览器的指纹识别技术,一边反追踪一边搞追踪
前端·chrome
Mintopia7 小时前
🚀 共绩算力:3分钟拥有自己的图像优化服务-CodeFormer:先进的图像算法优化、修复马赛克、提升图片清晰度等
前端·人工智能·ai编程
Lhuu(重开版8 小时前
html语法
前端·html
月弦笙音8 小时前
【vue3】这些不常用的API,却很实用
前端·vue.js·面试
小只笨笨狗~8 小时前
css-文字背景渐变色
前端·css·html
BingoGo8 小时前
CSS 也要支持 if 了 !!!CSS if() 函数来了!
前端·css
用户6600676685398 小时前
深入解析JavaScript数组:从内存原理到高效遍历实践
前端·javascript
用户12039112947268 小时前
CSS定位全解析:从静态到粘性,掌握元素布局的核心技巧
css