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

Question

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

我在Bootstrap 3中有一个固定的导航栏，当我单击其中一个导航项时，它会向下滚动到具有正确ID的部分。 但是，它一直持续到文本开始。 我想在文本上方留出一些空格（填充），以便我阅读。

这是我所说的例子。

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

因此，基本上，如果我可以将菜单设置为导航至该部分顶部的20像素或30像素左右，那将是一个完美的选择，因为我不想添加更多的填充或边距，因为当您在网站上放置过多的空白时，正在手动滚动。

Answer 1

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

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

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

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

Answer 2

我认为具有正确ID的部分具有margin-top: x ，在padding-top: x上进行更改。 它应该工作。