这是一个完整的jquery解决方案，将在IE中工作:

假设导航栏元素是这样的:

<ul>
    <li><a class="navigation" href="/#contact-us">Contact us</a></li>
    <li><a class="navigation" href="/#about-us">About us</a></li>
</ul>

你可以使用下面的jquery片段来偏移滚动:

$(function() {
    $("a.navigation").click(function(event) {
        event.preventDefault();
        offSetScroll($(this));
    });
    offSetScrollFromLocation(window.location.href.toLowerCase());
});

function offSetScroll(anchor) {
    var href = anchor.attr("href");
    offSetScrollFromLocation(href);
}

function offSetScrollFromLocation(href) {
    //Change this according to the height of the navigation bar
    var fromTop = 250;
    if(href.indexOf("#")<=0)
        return;
    var hash=href.substring(href.indexOf("#"));
    var targetOffset = $(hash).offset().top-fromTop;
    $('html, body').animate({scrollTop: targetOffset}, 400, function(e) {

    });
}

我需要一些东西，适用于入站链接，页面上的链接，并可以通过JS的目标，以便页面可以响应头部高度的变化

HTML

<ul>
  <li><a href="#ft_who">Who?</a></li>
  <li><a href="#ft_what">What?</a></li>
  <li><a href="#ft_when">When?</a></li>
</ul>
...
<h2 id="ft_who" class="fragment-target">Who?</h2> 
...
<a href="#">Can I be clicked?</a>
<h2 id="ft_what" class="fragment-target">What?</h2>
...
<h2 id="ft_when" class="fragment-target">When?</h2> 

CSS

.fragment-target {
    display: block;
    margin-top: -HEADER_HEIGHTpx;
    padding-top: HEADER_HEIGHTpx;
    z-index: -1;
}

z-index: -1允许片段目标上方“填充区域”中的链接仍然是可点击的，正如@MuttenXd在他的回答中所评论的那样

我还没有在IE 11、Edge 15+、Chrome 38+、FF 52+或Safari 9.1+中发现问题

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

对于动态高度和间隙变量

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

对于固定间隙值

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

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

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

对于css，你有:

.paddingtop { 
   padding-top: 90px; 
}

在我的纯粹主义思想中，这感觉有点俗气，但作为css的唯一解决方案，你可以使用:target选择器为活动锚定元素添加填充:

html, body {height:100%; min-height:100%; margin:0;} body {min-height:200%;} header {display:inline-block; position:fixed; font-size:1.5em; height:100px; top:0; left:0; right:0; line-height:100px; background:black; text-align:center;} header a {color:#fff;} section {padding:30px; margin:20px;} section:first-of-type, section:target {padding-top:130px;} <header><a href="#one">#One</a> <a href="#two">#two</a> <a href="#three">#three</a></header> <section id="one"><h1>One</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section> <section id="two"><h1>Two</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section> <section id="three"><h1>Three</h1>Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</section>

你可以用jQuery做到这一点:

var offset = $('.target').offset();
var scrollto = offset.top - 50; // fixed_top_bar_height = 50px
$('html, body').animate({scrollTop:scrollto}, 0);