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时，我需要它转到h2标题，该标题是关于测试链接，它位于同一页面上，但只是稍微向下，然后我需要这个h2标题在页面顶部。目前，当我点击Test Link时，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进行硬编码。

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

1 个答案: