如何在 Bootstrap 导航栏下方显示链接到的部分

Question

如何在 Bootstrap 导航栏下方显示“链接到”部分？

我正在使用最新版本的Twitter Bootstrap，即3.03和ASP.NET MVC 5。

我的页面顶部有一个导航栏，该导航栏的标记如下所示：

<header class="navbar navbar-inverse navbar-fixed-top">
     <div class="container">
          <div class="navbar-header">
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
               </button>
               @Html.ActionLink("Brendan Vogt", "Index", "Home", null, new { @class = "navbar-brand" })
          </div>
          <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                    <li class="@(Model.Equals("home") ? "active" : "")">
                         <a href="@Url.Action("Index", "Home")">
                              <span class="glyphicon glyphicon-home"></span> Home
                         </a>
                    </li>
                    <li class="@(Model.Equals("about") ? "active" : "")">
                         @Html.ActionLink("About", "About", "Home")
                    </li>
               </ul>
          </div>
     </div>
</header>

我的 css 文件中有以下内容：

body
{
    padding-top: 60px;
}

这是我关于页面上的标记：

<div class="container">
     <h1>About My Website</h1>
     <p>This is my <a href="#test-link">Test Link</a>.<p>
     <h2 id="test-link">About Test Link</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

当用户单击测试链接时，我需要它转到显示关于测试链接的 h2 标题，它位于同一页面上但稍稍靠下，然后我需要此 h2 标题在页面顶部。目前，当我单击测试链接时，h2 标题位于页面顶部，但位于导航栏后面。当页面第一次加载时，如何让它显示在导航栏下方，就像我的 h1 标题关于我的网站一样？

Answer 1

我明白你正在经历什么。如果你想让你的 h2 标题在有人点击测试链接时像你的 h1 标题一样显示在导航栏下方，你必须从总滚动量中减去 60px。我猜这对于 CSS 是不可能的。所以，这是适合您的 jQuery 解决方案：

$("a[href*=#]").click(function() {
    $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top - 60 + "px"
    });
    return false;
});

JS FIDDLE DEMO

如果您想要更多空间，只需将值从 60 增加到您想要的任何值。另外，我没有指定确切的 ID，因为我假设可能还有其他链接需要相同的效果。这样一来，您就安全了，而且您不必每次都为其他链接想要相同的效果时对 id 进行硬编码。