您可以只使用CSS而不使用任何JavaScript。

给你的主播上课：

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

然后，通过将锚定元素设置为块元素并对其进行相对定位，可以将其定位在高于或低于其在页面上实际显示位置的偏移量。-250px将把锚定位在250像素以上

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

我找到了这个解决方案：

<a name="myanchor">
    <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</a>

这不会在内容和锚链接上产生任何差距，效果非常好。

FWIW这对我有用：

[id]::before {{
  content: '';
  display: block;
  height:      75px;
  margin-top: -75px;
  visibility: hidden;
}}

我也在寻找解决办法。就我而言，这很容易。

我有一个包含所有链接的列表菜单：

<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
</ul>

下面是标题。

<h3>one</h3>
<p>text here</p>

<h3>two</h3>
<p>text here</p>

<h3>three</h3>
<p>text here</p>

<h3>four</h3>
<p>text here</p>

现在，因为我的页面顶部有一个固定的菜单，我不能让它直接进入我的标签，因为它会在菜单后面。

取而代之的是，我在标签里放了一个带有正确id的span标签。

<h3><span id="one"></span>one</h3>

现在使用2行CSS来正确定位它们。

h3{{ position:relative; }}
h3 span{{ position:absolute; top:-200px;}}

更改顶部值以匹配固定标题(or more)的高度。现在我假设这也适用于其他元素。

由于这是表示方面的问题，因此纯CSS解决方案是理想的。但是，此问题是在2012,中提出的，尽管已建议了相对定位/负边距解决方案，但这些方法似乎相当笨拙，会产生潜在的流问题，并且无法动态响应DOM /视口中的更改。

考虑到这一点，我相信使用JavaScript是still (February 2017)最好的方法。下面是一个普通的JS解决方案，它将响应锚定单击并在加载(See JSFiddle)时解析页面哈希。如果需要动态计算，请修改.getFixedOffset()方法。如果使用jQuery, here's a modified solution with better event delegation and smooth scrolling。

(function(document, history, location) {{
  var HISTORY_SUPPORT = !!(history && history.pushState);

  var anchorScrolls = {{
    ANCHOR_REGEX: /^#[^ ]+$/,
    OFFSET_HEIGHT_PX: 50,

    /**
     * Establish events, and fix initial scroll position if a hash is provided.
     */
    init: function() {{
      this.scrollToCurrent();
      window.addEventListener('hashchange', this.scrollToCurrent.bind(this));
      document.body.addEventListener('click', this.delegateAnchors.bind(this));
    }},

    /**
     * Return the offset amount to deduct from the normal scroll position.
     * Modify as appropriate to allow for dynamic calculations
     */
    getFixedOffset: function() {{
      return this.OFFSET_HEIGHT_PX;
    }},

    /**
     * If the provided href is an anchor which resolves to an element on the
     * page, scroll to it.
     * @param  {{String}} href
     * @return {{Boolean}} - Was the href an anchor.
     */
    scrollIfAnchor: function(href, pushToHistory) {{
      var match, rect, anchorOffset;

      if(!this.ANCHOR_REGEX.test(href)) {{
        return false;
      }}

      match = document.getElementById(href.slice(1));

      if(match) {{
        rect = match.getBoundingClientRect();
        anchorOffset = window.pageYOffset + rect.top - this.getFixedOffset();
        window.scrollTo(window.pageXOffset, anchorOffset);

        // Add the state to history as-per normal anchor links
        if(HISTORY_SUPPORT && pushToHistory) {{
          history.pushState({{}}, document.title, location.pathname + href);
        }}
      }}

      return !!match;
    }},

    /**
     * Attempt to scroll to the current location's hash.
     */
    scrollToCurrent: function() {{
      this.scrollIfAnchor(window.location.hash);
    }},

    /**
     * If the click event's target was an anchor, fix the scroll position.
     */
    delegateAnchors: function(e) {{
      var elem = e.target;

      if(
        elem.nodeName === 'A' &&
        this.scrollIfAnchor(elem.getAttribute('href'), true)
      ) {{
        e.preventDefault();
      }}
    }}
  }};

  window.addEventListener(
    'DOMContentLoaded', anchorScrolls.init.bind(anchorScrolls)
  );
}})(window.document, window.history, window.location);

受亚历山大·萨文启发的纯css解决方案：

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

如果目标仍不在屏幕上，您也可以选择添加以下内容：

  vertical-align: top;

我的解决方案结合了CMS的目标和之前选择器。其他技术无法解释锚中的文本。将高度和负边距调整到所需的偏移量.

:target::before {{
    content: '';
    display: block;
    height:      180px;
    margin-top: -180px;
}}

这将从以前的答案中获取许多元素，并组合成一个极小的(194字节（缩小）匿名jQuery函数。根据菜单或块元素的高度调整fixedElementHeight。

    (function($, window) {{
        var adjustAnchor = function() {{

            var $anchor = $(':target'),
                    fixedElementHeight = 100;

            if ($anchor.length > 0) {{

                $('html, body')
                    .stop()
                    .animate({{
                        scrollTop: $anchor.offset().top - fixedElementHeight
                    }}, 200);

            }}

        }};

        $(window).on('hashchange load', function() {{
            adjustAnchor();
        }});

    }})(jQuery, window);

如果不喜欢动画，请替换

$('html, body')
     .stop()
     .animate({{
         scrollTop: $anchor.offset().top - fixedElementHeight
     }}, 200);

与：

window.scrollTo(0, $anchor.offset().top - fixedElementHeight);

丑陋的版本：

 !function(o,n){{var t=function(){{var n=o(":target"),t=100;n.length>0&&o("html, body").stop().animate({{scrollTop:n.offset().top-t}},200)}};o(n).on("hashchange load",function(){{t()}})}}(jQuery,window);

对于现代浏览器，只需将CSS3 :target选择器添加到页面。这将自动应用于所有锚点。

:target {{
    display: block;    
    position: relative;     
    top: -100px;
    visibility: hidden;
}}

你可以不用js，也不用修改html。它只是css。

a[id]::before {{
    content: '';
    display: block;
    height: 50px;
    margin: -30px 0 0;
}}

这将在每个带有id的a标记之前附加一个伪元素。调整值以匹配收割台的高度。

我一直面临着类似的问题，不幸的是，在实施了上述所有解决方案后，我得出了以下结论。

1. 我的内部元素有一个脆弱的CSS结构，实现一个位置相对/绝对播放，完全打破了页面设计。
2. CSS不是我的强项。

我写了这个简单的滚动js，它解释了由于标题引起的偏移量，并将div重定位在下面约125像素处。请使用你认为合适的。

HTML

<div id="#anchor"></div> <!-- #anchor here is the anchor tag which is on your URL -->

JavaScript

 $(function() {{
  $('a[href*=#]:not([href=#])').click(function() {{
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {{

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {{
        $('html,body').animate({{
          scrollTop: target.offset().top - 125 //offsets for fixed header
        }}, 1000);
        return false;
      }}
    }}
  }});
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {{
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {{
        $('html,body').animate({{
          scrollTop: target.offset().top - 125 //offset height of header here too.
        }}, 1000);
        return false;
      }}
    }}
}});

请参阅live implementation here。

按照@moeffju的建议，这可以是achieved with CSS。我遇到的问题(which I'm surprised I haven't seen discussed)是使用填充或透明边框重叠前面的元素的技巧，以防止在这些部分的底部执行悬停和单击操作，因为下面的操作在z顺序中更高。

我发现的最佳修复方法是将节内容放置在z-index: 1:处的div中

// Apply to elements that serve as anchors
.offset-anchor {{
  border-top: 75px solid transparent;
  margin: -75px 0 0;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}}

// Because offset-anchor causes sections to overlap the bottom of previous ones,
// we need to put content higher so links aren't blocked by the transparent border.
.container {{
  position: relative;
  z-index: 1;
}}

具有更改位置属性的解决方案并不总是可行(it can destroy layout)，因此我建议：

HTML:

<a id="top">Anchor</a>

CSS:

#top {{
    margin-top: -250px;
    padding-top: 250px;
}}

使用这个：

<a id="top">&nbsp;</a>

要最小化重叠，请将字体大小设置为1px。空锚在某些浏览器中不起作用。

从给定的答案at this link (no author is specified)中借用一些代码，您可以在锚中包含一个漂亮的平滑滚动效果，同时使其在锚上方的-60px处停止，从而很好地适应固定引导程序导航栏(requires jQuery):的下方

$(".dropdown-menu a[href^='#']").on('click', function(e) {{
   // prevent default anchor click behavior
   e.preventDefault();

   // animate
   $('html, body').animate({{
       scrollTop: $(this.hash).offset().top - 60
     }}, 300, function(){{
     }});
}});

如果您的锚是表元素或在表(row or cell)中，则上述方法无法很好地工作。

我不得不使用JavaScript并绑定到窗口hashchange事件来解决此(demo):问题

function moveUnderNav() {{
    var $el, h = window.location.hash;
    if (h) {{
        $el = $(h);
        if ($el.length && $el.closest('table').length) {{
            $('body').scrollTop( $el.closest('table, tr').position().top - 26 );
        }}
    }}
}}

$(window)
    .load(function () {{
        moveUnderNav();
    }})
    .on('hashchange', function () {{
        moveUnderNav();
    }});

* 注意：hashchange事件并非在所有浏览器中都可用。

与其有一个固定位置的导航栏，而该导航栏被页面(with the whole page body being scrollable)的其余内容覆盖，不如考虑使用一个带有静态导航栏的不可滚动正文，然后将页面内容放在下面一个绝对位置的可滚动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%;
}}

但是，此方法有一个明显的缺点，即当页面标题中的元素处于焦点状态时，用户将无法使用键盘(e.g滚动页面。通过向上和向下箭头或Page Up和Page Down键）。

Here's a JSFiddle demonstrating this in action.

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

一个示例规则可能是：

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

这是受Shouvik回答的启发——与他的概念相同，只是固定标题的大小不是硬编码的。只要您的固定标头位于第一个标头node中，则此应"just work"

/*jslint browser: true, plusplus: true, regexp: true */

function anchorScroll(fragment) {{
    "use strict";
    var amount, ttarget;
    amount = $('header').height();
    ttarget = $('#' + fragment);
    $('html,body').animate({{ scrollTop: ttarget.offset().top - amount }}, 250);
    return false;
}}

function outsideToHash() {{
    "use strict";
    var fragment;
    if (window.location.hash) {{
        fragment = window.location.hash.substring(1);
        anchorScroll(fragment);
    }}
}}

function insideToHash(nnode) {{
    "use strict";
    var fragment;
    fragment = $(nnode).attr('href').substring(1);
    anchorScroll(fragment);
}}

$(document).ready(function () {{
    "use strict";
    $("a[href^='#']").bind('click',  function () {{insideToHash(this); }});
    outsideToHash();
}});

我在一个TYPO3网站中遇到了这个问题，其中所有"Content Elements"都用如下内容包装：

<div id="c1234" class="contentElement">...</div>

我更改了渲染，使其呈现如下：

<div id="c1234" class="anchor"></div>
<div class="contentElement">...</div>

这个CSS：

.anchor{{
    position: relative;
    top: -50px;
}}

固定顶杆高度为40px，现在锚再次工作，并在顶杆下方开始10px。

这种技术的唯一缺点是您不能再使用:target。

对来自@Jan的优秀答案的进一步扭曲是将其合并到使用jQuery (or MooTools)的#uberbar固定标头中。(http://davidwalsh.name/persistent-header-opacity)

我已经调整了代码，使内容的顶部始终位于固定标题之下，而不是固定标题之下，并再次添加了来自@Jan的锚，以确保锚始终位于固定标题之下。

CSS：

#uberbar {{ 
    border-bottom:1px solid #0000cc; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2000; 
    width:100%;
}}

a.anchor {{
    display: block;
    position: relative;
    visibility: hidden;
}}

jQuery (including tweaks to both the #uberbar and the anchor approaches:

<script type="text/javascript">
$(document).ready(function() {{
    (function() {{
        //settings
        var fadeSpeed = 200, fadeTo = 0.85, topDistance = 30;
        var topbarME = function() {{ $('#uberbar').fadeTo(fadeSpeed,1); }}, topbarML = function() {{ $('#uberbar').fadeTo(fadeSpeed,fadeTo); }};
        var inside = false;
        //do
        $(window).scroll(function() {{
            position = $(window).scrollTop();
            if(position > topDistance && !inside) {{
                //add events
                topbarML();
                $('#uberbar').bind('mouseenter',topbarME);
                $('#uberbar').bind('mouseleave',topbarML);
                inside = true;
            }}
            else if (position < topDistance){{
                topbarME();
                $('#uberbar').unbind('mouseenter',topbarME);
                $('#uberbar').unbind('mouseleave',topbarML);
                inside = false;
            }}
        }});
        $('#content').css({{'margin-top': $('#uberbar').outerHeight(true)}});
        $('a.anchor').css({{'top': - $('#uberbar').outerHeight(true)}});
    }})();
}});
</script>

最后是HTML：

<div id="uberbar">
    <!--CONTENT OF FIXED HEADER-->
</div>
....
<div id="content">
    <!--MAIN CONTENT-->
    ....
    <a class="anchor" id="anchor1"></a>
    ....
    <a class="anchor" id="anchor2"></a>
    ....
</div>

也许这对喜欢#uberbar dixed header的人有用！

还可以使用以下属性添加锚点：

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

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

非常适合我。

如何使用可链接ID的隐藏跨距标记来提供导航栏的高度：

#head1 {{
  padding-top: 60px;
  height: 0px;
  visibility: hidden;
}}


<span class="head1">somecontent</span>
<h5 id="headline1">This Headline is not obscured</h5>

这里是fiddle: http://jsfiddle.net/N6f2f/7

我在每个h1元素之前添加了40px高度.vspace元素来固定锚点。

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

在CSS中：

.vspace {{ height: 40px;}}

它工作得很好，空间也不拥挤。

除了Ziav的答案(with thanks to Alexander Savin)之外，我还需要使用旧的<a name="...">...</a>，因为我们在代码中使用<div id="...">...</div>是为了另一个目的。我在使用display: inline-block时遇到了一些显示问题--每个<p>元素的第一行都略微右缩进(on both Webkit and Firefox browsers)。我最终尝试了其他display值，display: table-caption对我来说非常适合。

.anchor {{
  padding-top: 60px;
  margin-top: -60px;
  display: table-caption;
}}

以下是我们在网站上使用的解决方案。将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;
}});

@AlexanderSavin's解决方案在我的WebKit浏览器中运行良好。

此外，我还必须使用:target伪类，该伪类将样式应用于选定的锚，以调整FF, Opera & IE9:中的填充

a:target {{
  padding-top: 40px
}}

Note that this style is not for Chrome / Safari so you'll probably have to use css-hacks, conditional comments etc.

另外，我想指出的是，亚历山大的解决方案之所以有效，是因为目标元素是inline。如果不需要链接，只需更改display属性即可：

<div id="myanchor" style="display: inline">
   <h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>

我遇到了同样的问题，最终手动处理了点击事件，比如：

$('#mynav a').click(() ->
  $('html, body').animate({{
      scrollTop: $($(this).attr('href')).offset().top - 40
  }}, 200
  return false
)

当然，滚动动画是可选的。