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

解决方案:

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

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

相关推荐
im_AMBER14 分钟前
React 12
前端·javascript·笔记·学习·react.js·前端框架
开开心心就好14 分钟前
电脑音质提升:杜比全景声安装详细教程
java·开发语言·前端·数据库·电脑·ruby·1024程序员节
午安~婉25 分钟前
HTML CSS八股
前端·css·html
有事没事实验室26 分钟前
css变量
前端·css
前端付豪38 分钟前
Vue 中的 JSX:让组件渲染更灵活的正确方式
前端·javascript·vue.js
在泡泡里39 分钟前
前端规范【四】eslint(antfu)、lefthook、commitlint
前端
烛阴40 分钟前
Python 几行代码,让你的照片秒变艺术素描画
前端·python
Jolyne_1 小时前
如何实现无感刷新Token
前端
用户4099322502121 小时前
Vue3响应式系统的底层原理与实践要点你真的懂吗?
前端·ai编程·trae
qq_479875431 小时前
RVO和移动语义
前端·算法