不要使用固定位置的导航条，它覆盖了页面的其余内容(整个页面主体都是可滚动的)，而是考虑使用静态导航条的不可滚动主体，然后将页面内容放在绝对位置的可滚动div中。

也就是说，有这样的HTML…

<div class="static-navbar">NAVBAR</div>
<div class="scrollable-content">
  <p>Bla bla bla</p>
  <p>Yadda yadda yadda</p>
  <p>Mary had a little lamb</p>
  <h2 id="stuff-i-want-to-link-to">Stuff</h2>
  <p>More nonsense</p>
</div>

．.． 和CSS是这样的:

.static-navbar {
  height: 100px;
}
.scrollable-content {
  position: absolute;
  top: 100px;
  bottom: 0;
  overflow-y: scroll;
  width: 100%;
}

然而，这种方法有一个显著的缺点，那就是当页面标题中的元素被聚焦时，用户将无法使用键盘滚动页面(例如，通过向上和向下箭头或page up和page down键)。

下面是一个演示这个操作的JSFiddle。

你可以使用a[name]:not([href]) css选择器在没有ID的情况下实现这一点。这仅仅是查找有名称且没有href的链接，例如<a name="anc1"></a>

一个示例规则可能是:

a[name]:not([href]){
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}

你也可以用follow attr添加一个锚:

(text-indent:-99999px;)
visibility: hidden;
position:absolute;
top:-80px;    

并给父容器一个相对的位置。

很适合我。

这是我们在网站上使用的解决方案。调整headerHeight变量，无论你的头部高度是什么。将js-scroll类添加到应该在单击时滚动的锚。

// SCROLL ON CLICK
// --------------------------------------------------------------------------
$('.js-scroll').click(function(){
    var headerHeight = 60;

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top - headerHeight
    }, 500);
    return false;
});

我在每个h1元素之前添加了40px-height .vspace元素。

<div class="vspace" id="gherkin"></div>
<div class="page-header">
  <h1>Gherkin</h1>
</div>

CSS中:

.vspace { height: 40px;}

它工作得很好，空间也没有堵塞。

受Alexander Savin启发的纯css解决方案:

a[name] {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block; /* required for webkit browsers */
}

如果目标仍然不在屏幕上，你可以选择添加以下内容:

  vertical-align: top;