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

Question

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

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

这是我所说的一个例子。

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

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

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 上更改它。它应该可以工作。