我对上面列出的答案没有任何运气，最终使用了这个完美的解决方案……

在想要设置锚点的地方创建一个空白span。

<span class="anchor" id="section1"></span>
<div class="section"></div>

并应用以下类:

.anchor {
  display: block;
  height: 115px;       /* same height as header */
  margin-top: -115px;  /* same height as header */
  visibility: hidden;
}

这个解决方案将工作，即使部分有不同的颜色背景!我在这个环节找到了解决方案。

CSS技巧将是一个解决方案。使用jQuery可以实现一个适用于所有场景的解决方案。

参考https://codepen.io/pikeshmn/pen/mMxEdZ

方法:我们使用document.getElementById('header').offsetHeight获取固定导航的高度 并将滚动偏移到这个值。

var jump=function(e){  

e.preventDefault();                        //prevent "hard" jump
  var target = $(this).attr("href");       //get the target

      //perform animated scrolling
      $('html,body').animate(
        {
          scrollTop: $(target).offset().top - document.getElementById('header').offsetHeight - 5  //get top-position of target-element and set it as scroll target
        },1000,function()                  //scrolldelay: 1 seconds
        {
          location.hash = target;          //attach the hash (#jumptarget) to the pageurl
        });
      }

  $(document).ready(function()
  {
    $('a[href*="#"]').bind("click", jump); //get all hrefs
    return false;
  });

注:

它包含了头部和目标之间5个像素的差异 滚动效果不硬，比较平滑;平滑滚动

对于Chrome/Safari/Firefox，你可以添加一个display: block，并使用负边距来补偿偏移量，如下所示:

a[name] {
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

参见示例http://codepen.io/swed/pen/RrZBJo

使用jQuery的最小侵入性方法:

链接:

<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>

内容:

<h3 id="my-anchor-1">Here is Anchor 1</a>

脚本:

$(".anchor-link").click(function() {
    var headerHeight = 120;
    $('html, body').stop(true, true).animate({
        scrollTop: $(this.hash).offset().top - headerHeight
    }, 750);
    return false;
});

通过将锚链接类分配给链接，其他链接(如手风琴或制表符控件)的行为不会受到影响。

这个问题不需要javascript，但另一个更受欢迎的问题因为这个问题而关闭了，我无法回答。

上面的答案创建了一个60px高的标签，屏蔽了其他因此停止工作的链接。我发现这个方法没有副作用。

<a class="anchor" id="top"></a>

a.anchor {
    display: block;
    position: relative;
    top: -60px;
    visibility: hidden;
}

通过添加滚动填充顶部属性来解决这个问题，只需将此代码添加到您的CSS文件中，就可以看到神奇的效果。

对于动态高度和间隙变量

html {   
    --headerHeight:79px;   
    --gap:40px;   
    scroll-padding-top: calc(var(--headerHeight) + var(--gap)); 
}

对于固定间隙值

html { 
    scroll-padding-top: 120px; 
}