添加一个带有“paddingtop”的类，这样它就可以工作了;)

<h1><a class="paddingtop">Bar</a></h1>

对于css，你有:

.paddingtop { 
   padding-top: 90px; 
}

<div style="position:relative; top:-45px;">
    <a name="fragment"> </a>
</div>

这段代码应该可以达到目的。将标题栏的高度替换为45px。

编辑:如果使用jQuery是一个选项，我也成功地使用jQuery。带有偏移值设置的localScroll。偏移量选项是jQuery的一部分。scrollTo, jQuery。localScroll是在此基础上构建的。这里有一个演示:http://demos.flesler.com/jquery/scrollTo/(第二个窗口，在'offset'下)

我也有同样的问题。 我通过向锚元素添加一个类来解决这个问题，并将topbar高度作为padding-top值。

<h1><a class="anchor" name="barlink">Bar</a></h1>

我使用这样的CSS:

.anchor { padding-top: 90px; }

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个像素的差异 滚动效果不硬，比较平滑;平滑滚动

使用:before实现的效果很好，直到我们意识到伪元素实际上覆盖和阻塞了伪元素区域内的指针事件。使用类似pointer-events: none的东西在:before上甚至直接在锚上都没有影响。

我们最终所做的是使锚的定位是绝对的，然后调整它的位置为偏移/高度的固定区域。

偏移锚没有阻塞指针事件

.section-marker {

    position: absolute;
    top: -300px;
}

这里的值是我们不会阻塞300px范围内的任何元素。缺点是，从Javascript中获取元素的位置需要考虑偏移量，因此任何逻辑都必须进行调整。

这就是当你点击导航时，我如何让它最终到达正确的位置。我为导航单击添加了一个事件处理程序。然后你可以使用“scrollBy”来向上移动偏移量。

var offset = 90;

 $('.navbar li a').click(function(event) {
    event.preventDefault();
    $($(this).attr('href'))[0].scrollIntoView();
    scrollBy(0, -offset);
 });