Twitter Bootstrap 模板页面跳过了 div 的开头答案

【问题标题】：Twitter Bootstrap template page jumps jumping past start of divTwitter Bootstrap 模板页面跳过了 div 的开头
【发布时间】：2013-11-24 02:41:24
【问题描述】：

我正在使用这个Twitter Bootstrap 模板来创建一个单页响应式网站。它工作得非常好，只是我发现 HTML 页面跳转不能正常工作。

对于导航中的 About、Services、Contact 页面跳转，我发现它们都滚动到了它们应该跳转到的 div 的开头。

这发生在最新版本的 Chrome 和 Firefox 上。我正在使用 Bootstrap 3。

我似乎找不到任何关于 Bootstrap 页面跳转的文档。

为什么他们似乎跳过了<div>？

【问题讨论】：

你能添加一些示例代码吗？您的问题可能与github.com/twbs/bootstrap/issues/10670 有关。
@BassJobsen 我对 Bootstrap 并不太熟悉——这是我第一次使用它。所以我实际上并不知道是什么代码导致了这个问题，尽管我认为它在 bootstrap.js 某处。你能看到我提供的模板示例中的问题吗？

标签： javascript jquery css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您的问题与上面的错误报告中提到的不同。

您在 body 元素上设置了 50 像素的 padding-top 来补偿固定的导航栏。滚动到 div 时，此填充无效，因此您的内容将被导航栏隐藏。

你可以添加一些额外的 javascript 来在你滚动到的 div 上设置一个 padding-top：

$('.navbar-ex1-collapse a').click(function() 
{
    $('.featurette').css('padding-top','0');
    var link = $(this).attr('href');
    $(link).css('padding-top','50px');
});

在您的 html 中添加额外的空间也是一种解决方案。

【讨论】：