单页引导网站跳过部分答案

【问题标题】：Single page bootstrap website skipping sections单页引导网站跳过部分
【发布时间】：2016-05-21 14:43:23
【问题描述】：

我目前正在使用 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">

（下面的所有内容都只是内容并关闭所有标签。）谢谢！

【问题讨论】：

标签： jquery html css twitter-bootstrap portfolio

【解决方案1】：

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

$("#btn-submission").click(function() {
		 $('html, body').animate({
			 scrollTop: $('#submission').offset().top - 50
		 }, 500);
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="btn-submission" href="javascript:void(0)">Submission</a>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="submission">
  <h2>Submission</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis lectus vitae enim tincidunt pellentesque. Fusce felis lorem, laoreet quis quam eget, sagittis ornare massa. Vivamus sit amet massa sit amet lacus efficitur feugiat elementum a massa. Nunc id fermentum turpis. Phasellus in molestie nulla. Pellentesque eget sem non velit tempus vestibulum in ac tortor. Aliquam ultricies diam ut dui ullamcorper, et scelerisque felis consectetur. In auctor massa ac turpis tristique lacinia. Maecenas quis suscipit neque.
</p></div>
<div id="others">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis lectus vitae enim tincidunt pellentesque. Fusce felis lorem, laoreet quis quam eget, sagittis ornare massa. Vivamus sit amet massa sit amet lacus efficitur feugiat elementum a massa. Nunc id fermentum turpis. Phasellus in molestie nulla. Pellentesque eget sem non velit tempus vestibulum in ac tortor. Aliquam ultricies diam ut dui ullamcorper, et scelerisque felis consectetur. In auctor massa ac turpis tristique lacinia. Maecenas quis suscipit neque.</div>

【讨论】：

【解决方案2】：

您的锚链接无法正确显示的原因可能有很多。鉴于您的示例，最安全的假设（也是我最常犯的错误）是在我的导航栏固定时忘记向我的 body 元素添加顶部填充。

Gavgrif 的回答解决了这个问题。

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

文章提供了几个示例和“技巧”，可以更轻松地处理锚点位置。总之，您应该在标题中包含锚点 (id="submissions")，如下所示：

<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”的技巧，因为旧浏览器不太支持它。

【讨论】：

【解决方案3】：

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

尝试将 body{padding-top: 50px} 添加到您的 css 中，看看是否允许显示部分标题。

【讨论】：

【解决方案4】：

快速解决方法是在第一部分的顶部添加一个间隔（可能是<div> 宽度某个特定高度）

【讨论】：