您可以将padding-top: 50px;添加到您的目标上，这可能会产生意想不到的副作用，即在您的目标上方始终有50px的空间。
示例：
超文本：

<a href="#test">Test</a>
<div style="height:1000px"><!-- create some whitespace for demo purposes --></div>

<h1 id="test">Target</h1>
<div style="height:1000px"><!-- create some whitespace for demo purposes --></div>

CSS：

#test { padding-top: 50px; }

DEMO

要获得解决问题的干净代码，请在“before”之前使用CSS：

<style>
#link:before{
padding-top:50px;display:block;content:"";
}
</style>

<a href="#link">Link</a>
<div id="link">content</div>

我发现这个解决方案是最有效的，因为它允许您在目标部分上方添加一些填充，而无需在元素之间添加间距。
在元素上方添加一个不可见的<div>，然后通过调整相对位置将其向上移动。

<style>
#section{
    position: relative;
    left: 0px; 
    top: -90px; /* Adjust this */
}
</style>

<div id="#section"></div> 
<div>content</div>

像这样使用一些CSS怎么样
超文本标记语言

<a name="Link" class="link1">

中央支助系统

.link1 {
  padding-top: 50px;
}

您可以创建一个超链接，通过添加域的相关名称将光标放在页面上的表单域中。只需在它前面添加一个尖字符。
第一个月
这个链接会将焦点放在移动的电话号码字段上。访问者可以立即输入号码并点击发送。

对于Bones225之前的回答：我还发现一个不可见的div元素效果最好，但是，如果你可能在你的站点中多次使用这个元素，我建议你把div设置成一个类：

.anchor {
    position: relative;
    top: -50px; /* adjust this to suit */
}

...然后在HTML中：

<!-- Your link to this item -->
<a href = "#example">Example</a>

<!-- The actual content -->
<div class = "anchor" id = "example"></div>
<h2>Example</h2>