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

解决方案:

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

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

相关推荐
摸鱼的春哥4 小时前
春哥的Agent通关秘籍13:实现RAG查询
前端·javascript·后端
明月_清风4 小时前
滚动锁定:用户向上翻看历史时,如何阻止 AI 新消息把它“顶”下去?
前端·javascript
明月_清风4 小时前
当高阶函数遇到 AI:如何自动化生成业务层面的逻辑拦截器
前端·javascript·函数式编程
moshuying14 小时前
别让AI焦虑,偷走你本该有的底气
前端·人工智能
GIS之路15 小时前
ArcPy,一个基于 Python 的 GIS 开发库简介
前端
可夫小子16 小时前
OpenClaw基础-为什么会有两个端口
前端
喝拿铁写前端16 小时前
Dify 构建 FE 工作流:前端团队可复用 AI 工作流实战
前端·人工智能
喝咖啡的女孩17 小时前
React 合成事件系统
前端
从文处安17 小时前
「九九八十一难」组合式函数到底有什么用?
前端·vue.js
用户59625857360618 小时前
戴上AI眼镜逛花市——感受不一样的体验
前端