Jquery 单页引导网站跳过部分

我目前正在使用Bootstrap开发一个类似于单页公文包的网站，遇到了一个恼人的问题

我使用导航栏上的按钮转到单页站点的特定部分，但由于某种原因，其中一个部分的标题被删除

下面是它的表现：

以下是我希望它的外观：

不确定是否相关，但以下是导航栏上按钮的代码：

          <div class="collapse navbar-collapse" id="navbar-collapse-1" >
            
            <ul class="nav navbar-nav">
                <li><a class="navbar-brand" href="#">Website name</a></li>
        
                <li>
                    <a href="#about" >About Us</a>
                </li>
              <li>
                <a href="#submissions">Submissions </a>
              </li>
              <li>
                <a href="#contact">Contact Us </a>
              </li>
        </ul>

以下是提交部分的初始代码：

    <section id="submissions" class="submissions">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center"><h2>Submissions</h2></div>
            <div class="col-lg-12">

意见书

（下面的所有内容都是内容并关闭所有标记。）

---

谢谢

快速修复方法是在第一节顶部添加一个垫片（可能是

宽度或特定高度）

如果是固定导航条，则需要考虑其占用的空间并添加填充。当导航栏固定时，它不是DOM的一部分，因此您的节标题将显示在屏幕顶部，但隐藏在导航栏下

---

尝试将body{padding top:50px}添加到css中，看看这是否允许显示节标题。

可能有很多情况说明锚链接没有正确显示。 举个例子，最安全的假设（也是我最常犯的错误）是在导航栏修复后忘记将顶部填充添加到身体元素

奥巴马的回答解决了这个问题

如果不是这样的话，CSS技巧有一篇关于锚链接及其行为的精彩文章，可以找到

这篇文章给出了几个例子和“技巧”，使处理锚点位置更容易。总之，您应该在标题中包含锚定（id=“提交”），如下所示：

<section class="submissions">
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
          <h2>
              <span name="submissions" id="submissions"></span>
              Submissions
          </h2>
        </div>
    <div class="col-lg-12">

意见书

此HTML允许您在跨度中添加负上边距，在标题中添加不同数量的正下边距，以准确定位锚定点

---

这个“把戏”在语义和其他一些方面有明显的缺陷，但文章中也提供了一个“仅CSS”把戏，前提是旧浏览器不太支持它。

嗨，我相信导航菜单是固定位置的。您只需将id=“submission”移动到容器内的元素。或者您可以使用jquery来制作这样更酷的东西

$（“#btn提交”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#提交”）.offset（）.top-50
}, 500);
});



























服从
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是佩伦茨克的生活指南。福斯·费利斯·洛雷姆、拉奥里特·奎斯·奎姆·埃吉特、奥纳·马萨射手座。生活是一种享受，生活是一种享受，生活是一种享受。努克发酵turpis。菲塞勒斯在莫莱斯蒂·努拉。交流斜颈患者的非天鹅绒节律前庭。在乌兰科佩尔河中发现了一种别有用心的植物，以及一种猫科动物的权杖。在拍卖人马萨ac turpis tristique lacinia。梅塞纳斯·奎斯·苏西皮特·内克。

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是佩伦茨克的生活指南。福斯·费利斯·洛雷姆、拉奥里特·奎斯·奎姆·埃吉特、奥纳·马萨射手座。生活是一种享受，生活是一种享受，生活是一种享受。努克发酵turpis。菲塞勒斯在莫莱斯蒂·努拉。交流斜颈患者的非天鹅绒节律前庭。在乌兰科佩尔河中发现了一种别有用心的植物，以及一种猫科动物的权杖。在拍卖人马萨ac turpis tristique lacinia。梅塞纳斯·奎斯·苏西皮特·内克。