Question

我有一个导航栏，该导航栏带有指向带有id="about"的文章的链接，但是我的导航栏是固定的，因此，当我单击链接时，导航栏位于该部分标题的前面。

我使用以下方法解决了这个问题：<span id="about" class="anchor"></span>

.main-content article .anchor{ 
    position: absolute;
    top: -106px;
}

但是对于scrollspy，我需要链接的href与我要“ scrollspy”的部分的ID相同，但不能两次使用相同的ID。

我该如何解决？有没有办法将-100px添加到您的href或类似的内容？

Answer 1

您可以在about内容上方添加一个“ false”锚点：

<div style="margin-top: -95px; position: absolute;" id="about"></div>

这将在上面的部分中增加边距，经过一些调整后，您可以更改px值以适合您的情况。

Answer 2

您可以像这样尝试使用jquery：

$(document).ready(function() {
  $('a[href^="#"]').click(function() {
      var target = $(this.hash);
      $('html, body').animate({ scrollTop: target.offset().top-100 }, 1000);
  }
}

链接到ID但通过导航栏

2 个答案: