jquery - 如何导航到稍高于 anchor 标记的位置？

Question

我知道如何导航到页面上给定的 anchor 标记 - 我想做的是链接到目标 anchor 上方 30-40 像素的页面部分。这样做的原因是，如果我想直接访问带有 anchor 的页面部分，我有一个 Bootstrap 导航，最终会覆盖部分相关内容。

目前我有这个链接:

%a{:href => root_path + "#how_it_works"} How It Works

在它链接到的页面上:

.span12#how_it_works

关于如何获取链接导航到略高于 .span12#how_it_works 的页面部分有什么想法吗？

Answer 1

我有一个好主意来欺骗你的浏览器。不需要 JavaScript。

创建一个 div 标签，并为其命名。让 div 为空。然后在 CSS 中使用定位将其向上移动您想要的距离。

position: relative;
top: -165px;

您可以根据需要使用相对或绝对位置。

然后只需将该 div 标记设为 anchor 标记即可。

<div class="anchor_placement" id="anchor"></div>

当您转到 anchor 时，它将转到 div 标签所在的位置。