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

我的内部元素有一个脆弱的CSS结构和实现位置相对/绝对发挥，完全打破了页面设计。 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;
      }
    }
});

点击这里查看实时实现。

你可以只使用CSS而不需要任何javascript。

给你的锚一个类:

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

然后，通过将锚定位为块元素并相对定位，您可以将锚定位在比它在页面上实际出现的位置更高或更低的偏移量。-250px将锚点向上定位250px

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    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>

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

相反，我在标签中放入了一个span标签，并带有正确的id。

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

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

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

更改顶部值以匹配固定标题的高度(或更多)。 现在我认为这也适用于其他元素。

如果您的锚是一个表元素或在一个表(行或单元格)中，上述方法就不能很好地工作。

我不得不使用javascript和绑定到窗口hashchange事件来解决这个问题(演示):

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事件并非在所有浏览器中都可用。

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

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

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

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

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

很适合我。