Javascript 如何将HTML ID链接与引导navbar标题一起使用？
在我的rails应用程序中，我试图构建一个简单的FAQ页面，其中有一个侧栏，当您单击某个主题时，它会向下移动到该问题 因此，我在侧边栏中的一段代码如下所示：Javascript 如何将HTML ID链接与引导navbar标题一起使用？,javascript,jquery,ruby-on-rails-3,html,twitter-bootstrap,Javascript,Jquery,Ruby On Rails 3,Html,Twitter Bootstrap,在我的rails应用程序中，我试图构建一个简单的FAQ页面，其中有一个侧栏，当您单击某个主题时，它会向下移动到该问题 因此，我在侧边栏中的一段代码如下所示： <li><a href="#work">How does it work?</a></li> 然后我有一个匹配的h2，id=“work” 我想，当我测试它时，它总是超调，因为它显示的内容从页面的最顶端开始，在引导中被导航栏隐藏。解决这个问题的最佳方法是什么？也有同样的问题。以下是我的想法
<li><a href="#work">How does it work?</a></li>
我想，当我测试它时，它总是超调，因为它显示的内容从页面的最顶端开始，在引导中被导航栏隐藏。解决这个问题的最佳方法是什么？也有同样的问题。以下是我的想法：
//侦听源自href以开头的元素的单击事件#
$（'body'）。在（'click.scroll adjust'，'[href^=“#”]”上，函数（e）{
var$nav
//确保导航未被阻止
if（e&&e.isDefaultPrevented（））返回
//获取对有问题的导航栏的引用
$nav=$（'div.navbar'）
//检查导航栏是否已固定
如果（$nav.css（'position'）！=“fixed”）返回
//侦听浏览器何时执行滚动
$（窗口）。一（'滚动'，函数（）{
//按导航栏的高度向上滚动窗口
scrollBy（0，-$nav.height（））
});
});
容器<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
<li><a href="#five">five</a></li>
</ul>
</div>
</div>
</div>
<div class="container" id="one">
<h1>One</h1>
</div>
...
<div class="container" id="five">
<h1>Five</h1>
</div>
值得注意的是，由于顶部部分也有此填充，因此无需将填充应用于
.container {
padding-top: 60px;
}