使用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，但另一个更受欢迎的问题因为这个问题而关闭了，我无法回答。

这对我来说很管用:

HTML链接到锚点:

<a href="#security">SECURITY</a>

HTML锚:

<a name="security" class="anchor"></a>

CSS:

.anchor::before {
    content: "";
    display: block;
    margin-top: -50px;
    position: absolute;
}

我认为最干净的方法是:

  #bar::before {
    display: block;
    content: " ";
    margin-top: -150px;
    height: 150px;
    visibility: hidden;
    pointer-events: none;
  }

刚刚发现了另一个纯CSS解决方案，对我来说就像一个魅力!

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

在这个网站上找到!

我创建了一个带有一些换行符的div，并给出了id，然后把我想要显示的代码放在下面。然后链接将带你到图像上方的空间，头部将不再碍事:

<a href="#image">Image</a>
<div id="image"><br><br></div>
<img src="Image.png">

当然，您可以根据需要更改换行符的数量。 这对我来说非常有效，但不确定是否有任何问题，我仍在学习HTML。

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

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

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