使用导航栏滚动时在部分顶部获取空间答案

【问题标题】：Get space on top of section when scrolling using Navigation bar使用导航栏滚动时在部分顶部获取空间
【发布时间】：2016-01-29 17:08:45
【问题描述】：

我认为这是一个非常简单的问题，但我自己无法找到解决方案。

我在 Bootstrap 3 中有一个固定的导航栏，当我单击其中一个导航项时，它会向下滚动到具有正确 ID 的部分。但是，它一直持续到正文的开头。我想在文本顶部留出一点空间（填充），这样更容易阅读。

这是我所说的一个例子。

但是，我希望它向下滚动到该部分的开头，包括我拥有的填充空间。像这样：

所以基本上，如果我可以将菜单设置为导航到该部分顶部的大约 20 或 30 像素，那将是完美的，因为我不想添加更多的填充或边距，因为这会在手动滚动时的站点。

【问题讨论】：

【解决方案1】：

我认为具有正确 ID 的部分具有 margin-top: x，请将其更改为 padding-top: x。它应该可以工作。

【讨论】：

【解决方案2】：

我使用 jQuery 插件来处理这种位置偏移。在 github 上查看Animated Scroll。

我手头没有所有代码，但我用它来启动它：

    $('.btn--scroll-down').click(function () { 
      $(this).parents('.jsScrollPoint').next('.jsScrollPoint').animatescroll();
    });

如果您阅读文档，您会注意到填充选项 - 这是您的偏移量。

【讨论】：