如何解决使用 #id 跳转页面段落时存在固定头部导航被遮盖

在较长的页面中,使用 #id 可以快速跳转到指定 id 的段落是一个很常见的技巧。但是常见的页面一般都是由导航栏和正文组成,如果直接这样跳转可能会出现被导航栏遮挡的效果,如下图所示:

页面结构如下:

html 复制代码
    <style>
      nav {
        height: 40px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: white;
        border-bottom: 1px solid #000;
      }
      aside {
        position: fixed;
        top: 0;
        right: 0;
      }
      main {
        margin-top: 40px;
      }
      h2 {
        margin: 0;
      }
    </style>
    <nav>导航栏</nav>
    <aside>
      <div>
        <a href="#title1">跳转标题1</a>
      </div>
      <div>
        <a href="#title2">跳转标题2</a>
      </div>
    </aside>
    <main>
      <div>
        <h2 id="title1">标题1</h2>
        <!-- ...正文内容 -->
      </div>
      <div>
        <h2 id="title2">标题2</h2>
        <!-- ...正文内容 -->
      </div>
    </main>

解决方案

其实解决方案也十分简单,只需要给标题标签加上 scroll-margin 即可。

按照 ChatGPT 解释:scroll-margin 是一个用于 CSS 的属性,它允许你定义在滚动容器(如滚动条所在的元素)和滚动容器内部元素之间的外边距,以调整滚动容器滚动时元素的可见性。这个属性可以用于创建"滚动吸附"效果,使元素在滚动到特定位置时停止,并且在滚动时预留一定的空间。

使用方式和 margin 基本一致,通过指定四个值(上、右、下、左)来设置外边距。这些值可以是长度、百分比、或 auto。

css 复制代码
h2 {
  scroll-margin: 10px 20px 30px 40px;
}

要解决被固定导航栏遮挡,只需要指定 scroll-margin-top 即可

css 复制代码
h2 {
  scroll-margin-top: 40px;
}

加上这个样式之后,跳转就和我们所需要的效果一致:

参考链接

相关推荐
专注API从业者19 分钟前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile23 分钟前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_4166399725 分钟前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊31 分钟前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火31 分钟前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
孤水寒月4 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀5 小时前
html初学者第一天
前端·html
耶啵奶膘7 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家8 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689978 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode