jquery - 如何在 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>

当用户点击 Test Link 时，我需要它转到显示 About Test Link 的 h2 header ，该 header 位于同一页面上但更靠下一点，然后我需要这个 h2 header 在页面顶部。目前，当我点击测试链接时，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 进行硬编码。